matrix_components 2.0.330 → 2.0.331
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 +14 -8
- package/dist/ComponentDemo/ImageDemo.vue +21 -137
- package/dist/matrix_components.css +1 -1
- package/dist/matrix_components.js +10 -16
- package/dist/matrix_components.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
# **组件库2.0**
|
|
2
2
|
组件使用示例参考dist/ComponentDemo
|
|
3
3
|
|
|
4
|
+
```
|
|
5
|
+
version:2.0.331
|
|
6
|
+
2025-11-24
|
|
7
|
+
更新日志：
|
|
8
|
+
1.修改NsImage组件bug
|
|
9
|
+
```
|
|
10
|
+
|
|
4
11
|
```
|
|
5
12
|
version:2.0.330
|
|
6
13
|
2025-11-24
|
|
7
14
|
更新日志：
|
|
8
|
-
1.NsDialog增加全部弹窗关闭方法closeAllNsDialog
|
|
9
|
-
2.添加post, get, put, del, download, downLoadLocalFile 等axios
|
|
15
|
+
1.NsDialog增加全部弹窗关闭方法closeAllNsDialog
|
|
16
|
+
2.添加post, get, put, del, download, downLoadLocalFile 等axios请求方法
|
|
10
17
|
```
|
|
11
18
|
|
|
12
19
|
```
|
|
@@ -479,15 +486,14 @@ const encrypArrs = getEncryptSm2(publicKey, ["xxx", "yyy"], isAdd04=false, ciphe
|
|
|
479
486
|
import NsComponents from 'matrix_components'
|
|
480
487
|
|
|
481
488
|
// 请求地址的baseUrl使用时必须get/psot必须传值，建议在app.use(NsComponents)之前设置
|
|
482
|
-
app.config.globalProperties.$BaseUrl =
|
|
489
|
+
app.config.globalProperties.$BaseUrl = 'http://请求ip：端口/'
|
|
483
490
|
app.use(NsComponents)
|
|
484
491
|
|
|
492
|
+
// 【可选】401无权显示回调
|
|
493
|
+
app.config.globalProperties.$LogoutCallback = logoutHandler // 无权显示回调
|
|
485
494
|
// 【可选】请求添加的token头的key，默认为satoken。token的key和value需要在外部项目中自己设置
|
|
486
|
-
app.config.globalProperties.$TonkenKey = "
|
|
487
|
-
|
|
488
|
-
app.config.globalProperties.$LogoutCallback = ()=>{
|
|
489
|
-
// 退出登录回调或者401回调
|
|
490
|
-
};
|
|
495
|
+
app.config.globalProperties.$TonkenKey = "tokenName"
|
|
496
|
+
app.config.globalProperties.$TonkenKey = "xxxx";
|
|
491
497
|
|
|
492
498
|
// 2. xx.vue / xx.ts 调用获取get、post请求
|
|
493
499
|
import { get, post } from 'matrix_components'
|
|
@@ -1,143 +1,27 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
-
<NsImg
|
|
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
|
-
<NsImg
|
|
54
|
-
:src="validImageUrl"
|
|
55
|
-
alt="图片1"
|
|
56
|
-
width="150"
|
|
57
|
-
height="100"
|
|
58
|
-
style="border: 1px solid #ccc; border-radius: 4px;"
|
|
59
|
-
/>
|
|
60
|
-
<NsImg
|
|
61
|
-
src="/nonexistent1.jpg"
|
|
62
|
-
error="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABZNJREFUeNqUVklzE0cU7u5p7QtGtuV9wUvAhhBcEFw+pYqcUjmkKldyyY/Kv8g9lUMuqWwVCClTQAzYAVsGGyvCiyTbI8105y09o7HDgbR6eplpfW9//eTX33wuFfykwocnHmgrhXtgoJ9rlgZsPOJkYDICJv5ZA4/QCXRcMbQjJqNROgrQpAPHiXBxJGirmA6cMAoWBs4Ywwy7jiSgeTzhAh+PFp4MuuHab7Xjpu9peqOjDkeoU3M4NOKjI355GwkRHZWxQFLuPKnvvNzX2dTictE6BdEgLY9CWiOFAs2QhAbFlVqqSBEJIXDhxRqDCa0wfW1oZnZC5kLgCqCZAKpeoX6MNAq1qAxCAyGh8CNJ4HBZ0xG6imjElshoT+aBM8+ZgCUwJIW0YCPANYgLBoDHoDTKJiAc+0l0ahr063kautp+2eh0AqXZMB5bwvPgsIxsJqUnk+rV7CCBH/707eODxvHM0sjyZ5cduvtb5EtCtA5PYJqaqwrcoceg/6BnAe8GeN9Y3b3//fPyxeydr26gRYh/AcOLh29aR/4HH49/srycMmnSUswUGYLUUurLiUSDt8iJZqERLJfNXluZ9v0wdm+WQGaL6fJwcXy0OjE8tmNrvjpWTMOTMoEIvLfbp+JsQx7RoBgGC1dnmpVTkUGm0S5WeLe/XIR1ZbgElkllVaj9MNfZe31oQpsvZVUCvtsNaltv6nsHx+3TQjEHJog/1XcO7/34bHjsYqg7Nh8MABq5sMBIRmfFPv/RCFhMeiGoPJfPPPz9Rakvv7Qyo1PoNo3GUX1vPwwxPEGIjfVXg9WL/f1l2EIAPl3dvnpzKlfMhEGInAPLhoNfessgQRx7HoeYKpQyE7ODwEWukAHhgfH9t01yexH7aKt1wqKkUnpqvlosZ20veZATGwqEhMWkYOegJ5XWoPFcPv1srfZfvXNrNk8e/LKeMDqDIICM8DRvOZPRK3c0TpzNejtTSKcLqXPo/nGwv9sOuyaBH0+9zKjFezS/3en6Qa6cASNRirTNf05a+/77/FdT9iXN0eRyMS8SLmQC0357AqJIrRqvWknGxdk7gpF4hq5twm5MQkSpUp6JASeKfxq+E13E+dXx62yteMHkohzp7qj/1QxdMc79nRy4VDYBGTe87OjWg0PXb88Vitl3gkLmWPl0wXFvepzFa4xv0eOaPpj4hOn4waP7m2FgP7w9N36peg59dnEE0Dk7EUPYbMxZFA3a9u4keIHZUcI5qSBVPPh5HeIgk08DBBCoDJY3nmz7p20AvXZzOk58f/76NyBdvj4O0UqXPiRWG/Pq3fpiISobhJtoDzuIZwhRSJQch+m0HhqrZHPphRuTmWyKVQwglYHSzlbj9Wajr78ANExcUZCigMAVLkk42P74YUN3UyMjQx3jAxYA92oImgvlPCsVGQWIEHdDo33tlg+ZKl9IO94NwRtQESpFcurY3dzf2zocGqoEBzYswF0LFjISFUg53fT8NvJkJMOcXpqvgg28MJVuZVb/WnuzfXDl1mipklNMx1AfnLwA6e7po1rtqMZGwxZiD7GHYWCi7tb8Fb+RjS/IyqXh2XKhAA5y77t1E0lg6LoAkc2du9e5pAEjSyoW4tzL5pFnJSCXM+x48PdntY3n3Rc79Ybf7jYbx86LQEyFlypaE69Wqwx6A11J0o29TCnPpgMuF51VzUGrublWPz3qNPfakwsDaAN4D6UMlRsRDahwBPjrOQLw2GR2iktHF1U0jc1U/FZn63F9dmkYOpBEFWE5ENPAQsZd6FiroYl7xa91SrKREDZZ/zKNycXqBPGOKoMrE+M5QQMiDDQOUkHN5BTPPuS0cy63RYM5R4bra0EqwgJYMQ0wNtoaS0AslsmqTk1ORfG1YmMKZ4r4WA52GTDPvwIMAEKdOHZW9Ea4AAAAAElFTkSuQmCC"
|
|
63
|
-
alt="图片2"
|
|
64
|
-
width="150"
|
|
65
|
-
height="100"
|
|
66
|
-
style="border: 1px solid #ccc; border-radius: 4px;"
|
|
67
|
-
/>
|
|
68
|
-
<NsImg
|
|
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>
|
|
2
|
+
<NsImage :src="src" :apiUrl="apiUrl" :hasPreview="hasPreview">
|
|
3
|
+
<img
|
|
4
|
+
:src="ThemeVar.VARS.getPropertyValue('--matrix-empty-img')"
|
|
5
|
+
style="width: 100%; height: 100%"
|
|
6
|
+
@click.stop
|
|
7
|
+
/>
|
|
8
|
+
</NsImage>
|
|
79
9
|
</template>
|
|
80
10
|
|
|
81
11
|
<script setup lang="ts">
|
|
82
|
-
import { ref } from 'vue'
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
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
|
-
}
|
|
12
|
+
import { reactive, ref } from 'vue';
|
|
13
|
+
import { ThemeVar } from '../../packages/utils/loadCssVars'
|
|
14
|
+
const src = ref('')
|
|
15
|
+
const hasPreview = ref(true)
|
|
16
|
+
const apiUrl = reactive( {
|
|
17
|
+
type: Object,
|
|
18
|
+
default: ()=>({
|
|
19
|
+
method: 'get',
|
|
20
|
+
url: '/tool/file/getFileDetail',
|
|
21
|
+
paramkey: 'fileIds',
|
|
22
|
+
params: {},
|
|
23
|
+
}),
|
|
24
|
+
})
|
|
104
25
|
</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
|
-
}
|
|
26
|
+
<style lang="scss" scoped>
|
|
143
27
|
</style>
|