matrix_components 2.0.307 → 2.0.310
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
# **组件库2.0**
|
|
2
2
|
组件使用示例参考dist/ComponentDemo
|
|
3
3
|
```
|
|
4
|
-
version:2.0.
|
|
4
|
+
version:2.0.309
|
|
5
|
+
2025-10-31 13:09:20
|
|
6
|
+
更新日志：
|
|
7
|
+
1.增加NsImage组件, 添加无法获取图片时使用默认图片
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
```
|
|
11
|
+
version:2.0.308
|
|
5
12
|
2025年10月23日11:21:46
|
|
6
13
|
更新日志：
|
|
7
14
|
1.增加Demo示例目录：组件使用示例在dist/ComponentDemo
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="image-demo">
|
|
3
|
+
<h2>NsImage 组件测试</h2>
|
|
4
|
+
|
|
5
|
+
<div class="demo-section">
|
|
6
|
+
<h3>1. 正常图片加载测试</h3>
|
|
7
|
+
<p>使用有效的图片URL</p>
|
|
8
|
+
<NsImage
|
|
9
|
+
:src="validImageUrl"
|
|
10
|
+
alt="有效图片"
|
|
11
|
+
width="300"
|
|
12
|
+
height="200"
|
|
13
|
+
style="border: 1px solid #ccc; border-radius: 8px;"
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div class="demo-section">
|
|
18
|
+
<h3>2. 图片加载失败测试</h3>
|
|
19
|
+
<p>使用不存在的图片URL，应该显示默认图片</p>
|
|
20
|
+
<NsImage
|
|
21
|
+
:src="invalidImageUrl"
|
|
22
|
+
alt="无效图片"
|
|
23
|
+
width="300"
|
|
24
|
+
height="200"
|
|
25
|
+
style="border: 1px solid #ccc; border-radius: 8px;"
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="demo-section">
|
|
30
|
+
<h3>3. 动态切换测试</h3>
|
|
31
|
+
<p>点击按钮切换图片URL</p>
|
|
32
|
+
<div style="margin-bottom: 10px;">
|
|
33
|
+
<button @click="toggleImage" style="padding: 8px 16px; margin-right: 10px;">
|
|
34
|
+
切换图片 (当前: {{ currentImageType }})
|
|
35
|
+
</button>
|
|
36
|
+
<button @click="useRandomInvalidUrl" style="padding: 8px 16px;">
|
|
37
|
+
使用随机无效URL
|
|
38
|
+
</button>
|
|
39
|
+
</div>
|
|
40
|
+
<NsImage
|
|
41
|
+
:src="dynamicImageUrl"
|
|
42
|
+
alt="动态图片"
|
|
43
|
+
width="300"
|
|
44
|
+
height="200"
|
|
45
|
+
style="border: 1px solid #ccc; border-radius: 8px;"
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div class="demo-section">
|
|
50
|
+
<h3>4. 多个实例测试</h3>
|
|
51
|
+
<p>测试多个NsImage组件同时使用</p>
|
|
52
|
+
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
|
|
53
|
+
<NsImage
|
|
54
|
+
:src="validImageUrl"
|
|
55
|
+
alt="图片1"
|
|
56
|
+
width="150"
|
|
57
|
+
height="100"
|
|
58
|
+
style="border: 1px solid #ccc; border-radius: 4px;"
|
|
59
|
+
/>
|
|
60
|
+
<NsImage
|
|
61
|
+
src="/nonexistent1.jpg"
|
|
62
|
+
error="data:image/png;base64,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"
|
|
63
|
+
alt="图片2"
|
|
64
|
+
width="150"
|
|
65
|
+
height="100"
|
|
66
|
+
style="border: 1px solid #ccc; border-radius: 4px;"
|
|
67
|
+
/>
|
|
68
|
+
<NsImage
|
|
69
|
+
src="/nonexistent2.jpg"
|
|
70
|
+
error="http://199.10.9.178:8081/static/rapture/resources/icons/x32/nexus.png"
|
|
71
|
+
alt="图片3"
|
|
72
|
+
width="150"
|
|
73
|
+
height="100"
|
|
74
|
+
style="border: 1px solid #ccc; border-radius: 4px;"
|
|
75
|
+
/>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</template>
|
|
80
|
+
|
|
81
|
+
<script setup lang="ts">
|
|
82
|
+
import { ref } from 'vue'
|
|
83
|
+
|
|
84
|
+
const validImageUrl = ref('http://199.10.10.67:10000/juzhenManage/assets/bg-cTuRoWal.png')
|
|
85
|
+
const invalidImageUrl = ref('/nonexistent/image.jpg')
|
|
86
|
+
|
|
87
|
+
const dynamicImageUrl = ref(validImageUrl.value)
|
|
88
|
+
const currentImageType = ref('有效图片')
|
|
89
|
+
|
|
90
|
+
const toggleImage = () => {
|
|
91
|
+
if (dynamicImageUrl.value === validImageUrl.value) {
|
|
92
|
+
dynamicImageUrl.value = invalidImageUrl.value
|
|
93
|
+
currentImageType.value = '无效图片'
|
|
94
|
+
} else {
|
|
95
|
+
dynamicImageUrl.value = validImageUrl.value
|
|
96
|
+
currentImageType.value = '有效图片'
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const useRandomInvalidUrl = () => {
|
|
101
|
+
dynamicImageUrl.value = `/random-invalid-${Date.now()}.jpg`
|
|
102
|
+
currentImageType.value = '随机无效图片'
|
|
103
|
+
}
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style scoped>
|
|
107
|
+
.image-demo {
|
|
108
|
+
padding: 20px;
|
|
109
|
+
max-width: 800px;
|
|
110
|
+
margin: 0 auto;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.demo-section {
|
|
114
|
+
margin-bottom: 40px;
|
|
115
|
+
padding: 20px;
|
|
116
|
+
border: 1px solid #e0e0e0;
|
|
117
|
+
border-radius: 8px;
|
|
118
|
+
background-color: #fafafa;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.demo-section h3 {
|
|
122
|
+
margin-top: 0;
|
|
123
|
+
color: #333;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.demo-section p {
|
|
127
|
+
color: #666;
|
|
128
|
+
margin-bottom: 15px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
button {
|
|
132
|
+
background-color: #409eff;
|
|
133
|
+
color: white;
|
|
134
|
+
border: none;
|
|
135
|
+
border-radius: 4px;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
transition: background-color 0.3s;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
button:hover {
|
|
141
|
+
background-color: #337ecc;
|
|
142
|
+
}
|
|
143
|
+
</style>
|