stellar-ui-v2 1.40.18 → 1.40.19
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 +8 -8
- package/components/ste-app-share/draw.js +2 -2
- package/components/ste-app-share/ste-app-share.vue +23 -6
- package/components/ste-index-list/README.md +6 -6
- package/components/ste-message-box/ste-message-box.js +72 -72
- package/components/ste-message-box/ste-message-box.vue +364 -364
- package/components/ste-popup/README.md +16 -16
- package/components/ste-popup/ste-popup.vue +392 -392
- package/components/ste-price/ste-price.vue +256 -256
- package/components/ste-rate/README.md +13 -13
- package/components/ste-search/ste-search.vue +590 -590
- package/components/ste-select/datetime.vue +106 -106
- package/components/ste-table-column/checkbox-icon.vue +65 -65
- package/components/ste-table-column/radio-icon.vue +110 -110
- package/components/ste-table-column/sub-table.vue +116 -116
- package/components/ste-tabs/props.js +212 -212
- package/components/ste-toast/ste-toast.js +69 -69
- package/components/ste-video/ste-video.vue +756 -756
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
|
|
11
11
|
## ✨ 特性
|
|
12
12
|
|
|
13
|
-
- 🎯 多平台覆盖,支持 微信小程序、支付宝小程序、H5.
|
|
14
|
-
- 🚀 40+ 个高质量组件,覆盖移动端主流场景.
|
|
15
|
-
- 📖 提供丰富的文档和组件示例.
|
|
13
|
+
- 🎯 多平台覆盖,支持 微信小程序、支付宝小程序、H5.
|
|
14
|
+
- 🚀 40+ 个高质量组件,覆盖移动端主流场景.
|
|
15
|
+
- 📖 提供丰富的文档和组件示例.
|
|
16
16
|
- 🎨 支持修改 CSS 变量实现主题定制.
|
|
17
17
|
|
|
18
18
|
## 📱 预览
|
|
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
|
|
|
75
75
|
|
|
76
76
|
## 周边生态
|
|
77
77
|
|
|
78
|
-
| 项目 | 描述 |
|
|
79
|
-
| --- | --- |
|
|
80
|
-
|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建,打造的uni-app组件库 |
|
|
81
|
-
|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
|
|
82
|
-
|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
|
|
78
|
+
| 项目 | 描述 |
|
|
79
|
+
| --- | --- |
|
|
80
|
+
|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建,打造的uni-app组件库 |
|
|
81
|
+
|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
|
|
82
|
+
|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
|
|
83
83
|
|[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli) |stellar配套的脚手架 |
|
|
84
84
|
|
|
85
85
|
## 核心团队
|
|
@@ -58,7 +58,7 @@ export function drawPoster(ctx, poster, data) {
|
|
|
58
58
|
ctx.setFontSize(20);
|
|
59
59
|
ctx.setFillStyle('#ff0000');
|
|
60
60
|
ctx.setTextAlign('left');
|
|
61
|
-
ctx.fillText(`¥${data.price}`, 10, width +
|
|
61
|
+
ctx.fillText(`¥${data.price}`, 10, width + 125);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
// 绘制文字
|
|
@@ -66,7 +66,7 @@ export function drawPoster(ctx, poster, data) {
|
|
|
66
66
|
ctx.setFontSize(12);
|
|
67
67
|
ctx.setFillStyle('#666666');
|
|
68
68
|
ctx.setTextAlign('left');
|
|
69
|
-
ctx.fillText(poster.message, 10,
|
|
69
|
+
ctx.fillText(poster.message, 10, width + 150);
|
|
70
70
|
}
|
|
71
71
|
// 绘制qrcode
|
|
72
72
|
if (poster.qrcode) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- 分享弹窗 -->
|
|
3
3
|
<view class="ste-share-root" :class="{ open: dataOpen }">
|
|
4
|
-
<view class="content-box" :style="
|
|
4
|
+
<view class="content-box" :style="canvasStyle">
|
|
5
5
|
<view class="loading" v-if="loading"></view>
|
|
6
6
|
<canvas id="content-poster" canvas-id="content-poster" />
|
|
7
7
|
</view>
|
|
@@ -38,7 +38,10 @@
|
|
|
38
38
|
<script>
|
|
39
39
|
import { copyFileToPublicDir, drawPoster } from './draw';
|
|
40
40
|
import { share } from './share';
|
|
41
|
-
|
|
41
|
+
import utils from '../../utils/utils';
|
|
42
|
+
// #ifndef APP
|
|
43
|
+
const notApp = '该功能仅在APP端有效';
|
|
44
|
+
// #endif
|
|
42
45
|
export default {
|
|
43
46
|
name: 'ste-app-share',
|
|
44
47
|
group: '业务组件',
|
|
@@ -77,6 +80,15 @@ export default {
|
|
|
77
80
|
canvas: null,
|
|
78
81
|
};
|
|
79
82
|
},
|
|
83
|
+
computed: {
|
|
84
|
+
canvasStyle() {
|
|
85
|
+
return {
|
|
86
|
+
width: utils.formatPx(660),
|
|
87
|
+
height: utils.formatPx(990),
|
|
88
|
+
opacity: this.viewPoster ? 1 : 0,
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
},
|
|
80
92
|
watch: {
|
|
81
93
|
open: {
|
|
82
94
|
handler(val) {
|
|
@@ -96,7 +108,8 @@ export default {
|
|
|
96
108
|
},
|
|
97
109
|
handShare(scene) {
|
|
98
110
|
// #ifndef APP
|
|
99
|
-
|
|
111
|
+
console.error(notApp);
|
|
112
|
+
uni.showToast({ title: notApp, icon: 'none', duration: 2000 });
|
|
100
113
|
// #endif
|
|
101
114
|
// #ifdef APP
|
|
102
115
|
share(scene, this.miniProgram, this.data);
|
|
@@ -126,6 +139,7 @@ export default {
|
|
|
126
139
|
}
|
|
127
140
|
},
|
|
128
141
|
downloadPoster() {
|
|
142
|
+
// #ifdef APP
|
|
129
143
|
uni.canvasToTempFilePath({
|
|
130
144
|
canvasId: 'content-poster',
|
|
131
145
|
success: ({ tempFilePath }) => {
|
|
@@ -140,6 +154,11 @@ export default {
|
|
|
140
154
|
});
|
|
141
155
|
},
|
|
142
156
|
});
|
|
157
|
+
// #endif
|
|
158
|
+
// #ifndef APP
|
|
159
|
+
console.error(notApp);
|
|
160
|
+
uni.showToast({ title: notApp, icon: 'none', duration: 2000 });
|
|
161
|
+
// #endif
|
|
143
162
|
},
|
|
144
163
|
},
|
|
145
164
|
};
|
|
@@ -152,7 +171,7 @@ export default {
|
|
|
152
171
|
left: 0;
|
|
153
172
|
width: 100%;
|
|
154
173
|
height: 100%;
|
|
155
|
-
z-index:
|
|
174
|
+
z-index: 1001;
|
|
156
175
|
background-color: rgba(0, 0, 0, 0.5);
|
|
157
176
|
opacity: 0;
|
|
158
177
|
pointer-events: none;
|
|
@@ -163,8 +182,6 @@ export default {
|
|
|
163
182
|
}
|
|
164
183
|
.content-box {
|
|
165
184
|
position: absolute;
|
|
166
|
-
width: 660rpx;
|
|
167
|
-
height: 960rpx;
|
|
168
185
|
top: 90rpx;
|
|
169
186
|
left: 50%;
|
|
170
187
|
transform: translateX(-50%);
|
|
@@ -111,12 +111,12 @@ methods: {
|
|
|
111
111
|
|
|
112
112
|
#### IndexList Props
|
|
113
113
|
|
|
114
|
-
| 属性名 | 说明 |类型 |默认值 |可选值 | 支持版本 |
|
|
115
|
-
| --- |--- | --- | --- | --- | --- |
|
|
116
|
-
| `active` | 当前激活的索引下标,支持sync双向绑定,默认值0 | `Number` | `0` | - | - |
|
|
117
|
-
| `height` | 高度,默认值100% | `String`/`Number` | `"100%"` | - | - |
|
|
118
|
-
| `sticky` | `title`是否粘性布局,自定义`title`插槽时不生效 | `Boolean` | `true` | - | - |
|
|
119
|
-
| `inactiveColor` | 右边锚点状态非激活时的颜色 | `String` | `#666666` | - | - |
|
|
114
|
+
| 属性名 | 说明 |类型 |默认值 |可选值 | 支持版本 |
|
|
115
|
+
| --- |--- | --- | --- | --- | --- |
|
|
116
|
+
| `active` | 当前激活的索引下标,支持sync双向绑定,默认值0 | `Number` | `0` | - | - |
|
|
117
|
+
| `height` | 高度,默认值100% | `String`/`Number` | `"100%"` | - | - |
|
|
118
|
+
| `sticky` | `title`是否粘性布局,自定义`title`插槽时不生效 | `Boolean` | `true` | - | - |
|
|
119
|
+
| `inactiveColor` | 右边锚点状态非激活时的颜色 | `String` | `#666666` | - | - |
|
|
120
120
|
| `activeColor` | 右边锚点状态激活时的颜色 | `String` | `#0090FF` | - | - |
|
|
121
121
|
|
|
122
122
|
#### IndexList Events
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import Vue from 'vue';
|
|
2
|
-
import Vuex from 'vuex';
|
|
3
|
-
|
|
4
|
-
Vue.use(Vuex);
|
|
5
|
-
const DEFAULT_KEY = '$steMsgBoxKey';
|
|
6
|
-
const DEFAULT_CONFIG = {
|
|
7
|
-
title: '',
|
|
8
|
-
content: '',
|
|
9
|
-
showCancel: true,
|
|
10
|
-
icon: '',
|
|
11
|
-
cancelText: '取消',
|
|
12
|
-
cancelColor: '#333333',
|
|
13
|
-
confirmText: '确认',
|
|
14
|
-
confirmColor: '',
|
|
15
|
-
editable: false,
|
|
16
|
-
placeholderText: '',
|
|
17
|
-
success: null,
|
|
18
|
-
fail: null,
|
|
19
|
-
complete: null,
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const store = new Vuex.Store({
|
|
23
|
-
state: {},
|
|
24
|
-
mutations: {
|
|
25
|
-
initializeState(state, key) {
|
|
26
|
-
if (!state[key]) {
|
|
27
|
-
Vue.set(state, key, {
|
|
28
|
-
selector: key,
|
|
29
|
-
openBegin: false,
|
|
30
|
-
...DEFAULT_CONFIG,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
setState(state, { key, params }) {
|
|
35
|
-
Object.assign(state[key], params);
|
|
36
|
-
},
|
|
37
|
-
resetState(state, key) {
|
|
38
|
-
Object.assign(state[key], {
|
|
39
|
-
openBegin: false,
|
|
40
|
-
});
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
function useSteMsgBox(key) {
|
|
46
|
-
key = key ?? DEFAULT_KEY;
|
|
47
|
-
store.commit('initializeState', key);
|
|
48
|
-
|
|
49
|
-
return {
|
|
50
|
-
showMsgBox(params) {
|
|
51
|
-
store.commit('setState', {
|
|
52
|
-
key,
|
|
53
|
-
params: {
|
|
54
|
-
...DEFAULT_CONFIG,
|
|
55
|
-
...params,
|
|
56
|
-
confirm: params.confirm ?? function () {},
|
|
57
|
-
cancel: params.cancel ?? function () {},
|
|
58
|
-
complete: params.complete ?? function () {},
|
|
59
|
-
openBegin: true,
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
},
|
|
63
|
-
hideMsgBox() {
|
|
64
|
-
store.commit('resetState', key);
|
|
65
|
-
},
|
|
66
|
-
$state: store.state[key],
|
|
67
|
-
$store: store,
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export default useSteMsgBox;
|
|
72
|
-
export { DEFAULT_KEY };
|
|
1
|
+
import Vue from 'vue';
|
|
2
|
+
import Vuex from 'vuex';
|
|
3
|
+
|
|
4
|
+
Vue.use(Vuex);
|
|
5
|
+
const DEFAULT_KEY = '$steMsgBoxKey';
|
|
6
|
+
const DEFAULT_CONFIG = {
|
|
7
|
+
title: '',
|
|
8
|
+
content: '',
|
|
9
|
+
showCancel: true,
|
|
10
|
+
icon: '',
|
|
11
|
+
cancelText: '取消',
|
|
12
|
+
cancelColor: '#333333',
|
|
13
|
+
confirmText: '确认',
|
|
14
|
+
confirmColor: '',
|
|
15
|
+
editable: false,
|
|
16
|
+
placeholderText: '',
|
|
17
|
+
success: null,
|
|
18
|
+
fail: null,
|
|
19
|
+
complete: null,
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const store = new Vuex.Store({
|
|
23
|
+
state: {},
|
|
24
|
+
mutations: {
|
|
25
|
+
initializeState(state, key) {
|
|
26
|
+
if (!state[key]) {
|
|
27
|
+
Vue.set(state, key, {
|
|
28
|
+
selector: key,
|
|
29
|
+
openBegin: false,
|
|
30
|
+
...DEFAULT_CONFIG,
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
setState(state, { key, params }) {
|
|
35
|
+
Object.assign(state[key], params);
|
|
36
|
+
},
|
|
37
|
+
resetState(state, key) {
|
|
38
|
+
Object.assign(state[key], {
|
|
39
|
+
openBegin: false,
|
|
40
|
+
});
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
function useSteMsgBox(key) {
|
|
46
|
+
key = key ?? DEFAULT_KEY;
|
|
47
|
+
store.commit('initializeState', key);
|
|
48
|
+
|
|
49
|
+
return {
|
|
50
|
+
showMsgBox(params) {
|
|
51
|
+
store.commit('setState', {
|
|
52
|
+
key,
|
|
53
|
+
params: {
|
|
54
|
+
...DEFAULT_CONFIG,
|
|
55
|
+
...params,
|
|
56
|
+
confirm: params.confirm ?? function () {},
|
|
57
|
+
cancel: params.cancel ?? function () {},
|
|
58
|
+
complete: params.complete ?? function () {},
|
|
59
|
+
openBegin: true,
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
},
|
|
63
|
+
hideMsgBox() {
|
|
64
|
+
store.commit('resetState', key);
|
|
65
|
+
},
|
|
66
|
+
$state: store.state[key],
|
|
67
|
+
$store: store,
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default useSteMsgBox;
|
|
72
|
+
export { DEFAULT_KEY };
|