stellar-ui-v2 1.40.2 → 1.40.3

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.
Files changed (3) hide show
  1. package/components/ste-progress/README.md +18 -17
  2. package/components/ste-progress/ste-progress.vue +206 -200
  3. package/package.json +1 -1
package/components/ste-progress/README.md CHANGED
@@ -62,25 +62,26 @@
62
62
  ---$
63
63
  ### API
64
64
  #### Props
65
- | 参数 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
66
- | --- | --- | --- | --- | --- | --- |
67
- |`activeBg` | 进度条激活部分的背景 | `String` | `#0090FF` | - | - |
68
- |`inactiveBg` | 进度条未激活部分的背景 | `String` | `#eeeeee` | - | - |
69
- |`percentage` | 进度条百分比 | `Number` | `0` | 0-100 | - |
70
- |`strokeWidth` | 进度条的粗细，默认单位rpx | `String/Number` | `24rpx` | - | - |
71
- |`disabled` | 是否禁用 | `Boolean` | `false` | - | - |
72
- |`width` | 宽度 <br/>Number，单位rpx<br/>String，同原生<br/>默认宽度是`100%`，会根据父容器的宽度，如果父容器没有宽度将不会显示 | `String/Number` | `100%` | - | - |
73
- |`duration` | 动画时间，单位秒，设置为 0 可以禁用动画 | `Number` | `0.3` | - | - |
74
- |`pivotText` | 进度文字内容 | `String` | - | - | - |
75
- |`textColor` | 进度文字颜色 | `String` | `#ffffff` | - | - |
76
- |`textAlign` | 文本对齐方式 | `String` | `right` | `left` 居左<br/>`center` 居中 | - |
77
- |`textSize` | 文本字体大小，默认单位rpx | `String/Number` | `16` | - | - |
78
- |`displayTextThreshold` | 默认文本显示阈值 | `Number` | `0` | - | - |
65
+ | 参数 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
66
+ | --- | --- | --- | --- | --- | --- |
67
+ |`activeBg` | 进度条激活部分的背景 | `String` | `#0090FF` | - | - |
68
+ |`inactiveBg` | 进度条未激活部分的背景 | `String` | `#eeeeee` | - | - |
69
+ |`percentage` | 进度条百分比 | `Number` | `0` | 0-100 | - |
70
+ |`strokeWidth` | 进度条的粗细，默认单位rpx | `String/Number` | `24rpx` | - | - |
71
+ |`disabled` | 是否禁用 | `Boolean` | `false` | - | - |
72
+ |`width` | 宽度 <br/>Number，单位rpx<br/>String，同原生<br/>默认宽度是`100%`，会根据父容器的宽度，如果父容器没有宽度将不会显示 | `String/Number` | `100%` | - | - |
73
+ |`duration` | 动画时间，单位秒，设置为 0 可以禁用动画 | `Number` | `0.3` | - | - |
74
+ |`pivotText` | 进度文字内容 | `String` | - | - | - |
75
+ |`textColor` | 进度文字颜色 | `String` | `#ffffff` | - | - |
76
+ |`textAlign` | 文本对齐方式 | `String` | `right` | `left` 居左<br/>`center` 居中 | - |
77
+ |`textSize` | 文本字体大小，默认单位rpx | `String/Number` | `16` | - | - |
78
+ |`displayTextThreshold` | 默认文本显示阈值 | `Number` | `0` | - | - |
79
+ |`borderRadius` | 进度条圆角值（单位rpx） | `String/Number` | `24` | - | `v1.40.3` |
79
80
 
80
81
  #### Slots
81
- |插槽名 |说明 |插槽参数 |支持版本 |
82
- | --- | --- | --- | --- |
83
- | `default` | 进度条内容 |- | - |
82
+ |插槽名 |说明 |插槽参数 |支持版本 |
83
+ | --- | --- | --- | --- |
84
+ | `default` | 进度条内容 |- | - |
84
85
 
85
86
  ---$
86
87
 
package/components/ste-progress/ste-progress.vue CHANGED
@@ -1,200 +1,206 @@
1
- <template>
2
- <view class="ste-progress-root" :style="[cmpRootCssVar]">
3
- <view class="inactive-box" :style="[cmpInactiveStyle]"></view>
4
- <view class="active-box line" :style="[cmpActiveStyle]" v-if="realPercentage > 0">
5
- <slot v-if="haveSlot"></slot>
6
- <text class="text" v-else>{{ cmpActiveText }}</text>
7
- </view>
8
- </view>
9
- </template>
10
-
11
- <script>
12
- import utils from '../../utils/utils.js';
13
- import useColor from '../../config/color.js';
14
- let color = useColor();
15
- /**
16
- * ste-progress 进度条
17
- * @description 进度条组件
18
- * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-progress
19
- * @property {String} activeBg 进度条激活部分的背景 默认值 #0090FF
20
- * @property {String} inactiveBg 进度条未激活部分的背景 默认值 #eeeeee
21
- * @property {Number} percentage 进度条百分比 默认值 0
22
- * @property {Number|String} strokeWidth 进度条的粗细，默认单位rpx 默认值 24
23
- * @property {Boolean} disabled 是否禁用状态 默认 false
24
- * @property {Number|String} width 进度条宽度 默认值 100%
25
- * @property {Number} duration 进度条动画执行时间，单位秒，设置为 0 可以禁用动画 默认值 0.3
26
- * @property {String} pivotText 进度文字内容
27
- * @property {String} textColor 进度文字颜色 默认 #ffffff
28
- * @property {String} textAlign 文本对齐方式 默认 right
29
- * @property {String} textSize 文本字体大小，默认单位rpx 默认 16
30
- * @property {Number} textSize 默认文本显示阈值 默认 0
31
- */
32
- const MIN = 0;
33
- const MAX = 100;
34
- export default {
35
- group: '数据组件',
36
- title: 'Progress 进度条',
37
- name: 'ste-progress',
38
- props: {
39
- activeBg: {
40
- type: [String, null],
41
- default: '',
42
- },
43
- inactiveBg: {
44
- type: [String, null],
45
- default: '#eeeeee',
46
- },
47
- percentage: {
48
- type: [Number, null],
49
- default: 0,
50
- },
51
- strokeWidth: {
52
- type: [String, Number, null],
53
- default: 24,
54
- },
55
- disabled: {
56
- type: [Boolean, null],
57
- default: false,
58
- },
59
- width: {
60
- type: [String, Number, null],
61
- default: '100%',
62
- },
63
- duration: {
64
- type: [Number, null],
65
- default: 0.3,
66
- },
67
- pivotText: {
68
- type: [String, null],
69
- default: '',
70
- },
71
- textColor: {
72
- type: [String, null],
73
- default: '#ffffff',
74
- },
75
- textAlign: {
76
- type: [String, null],
77
- default: 'right',
78
- },
79
- textSize: {
80
- type: [String, Number, null],
81
- default: 16,
82
- },
83
- displayTextThreshold: {
84
- type: [Number, null],
85
- default: 0,
86
- },
87
- },
88
- data() {
89
- return {
90
- realPercentage: 0,
91
- haveSlot: false,
92
- };
93
- },
94
- created() {},
95
- mounted() {
96
- this.haveSlot = this.$slots.default;
97
- },
98
- computed: {
99
- cmpRootCssVar() {
100
- const style = {
101
- '--progress-width': utils.formatPx(this.width),
102
- '--progress-height': utils.formatPx(this.strokeWidth),
103
- // #ifdef MP-WEIXIN || MP-ALIPAY
104
- '--progress-padding': this.$slots.default ? '0' : '0 16rpx',
105
- // #endif
106
- // #ifdef H5
107
- '--progress-padding': this.$slots.default ? '0' : '0 8px',
108
- // #endif
109
- '--active-width': this.realPercentage + '%',
110
- '--active-text-align': this.textAlign == 'right' ? 'flex-end' : this.textAlign,
111
- '--active-text-color': this.textColor,
112
- '--active-text-font-size': utils.formatPx(this.textSize),
113
- '--active-transition-duration': `${this.duration}s`,
114
- };
115
- return style;
116
- },
117
- cmpInactiveStyle() {
118
- let style = {};
119
- if (this.disabled) {
120
- style.backgroundColor = '#eeeeee';
121
- } else {
122
- const bg = utils.bg2style(this.inactiveBg);
123
- style = { ...style, ...bg };
124
- }
125
- return style;
126
- },
127
- cmpActiveStyle() {
128
- let style = {};
129
- if (this.disabled) {
130
- style.backgroundColor = '#cccccc';
131
- } else {
132
- const bg = utils.bg2style(this.activeBg ? this.activeBg : color.getColor().steThemeColor);
133
- style = { ...style, ...bg };
134
- }
135
- return style;
136
- },
137
- cmpActiveText() {
138
- let str = this.pivotText ? this.pivotText : this.realPercentage <= MIN ? '' : `${this.realPercentage}%`;
139
- if (this.displayTextThreshold > 0 && this.realPercentage < this.displayTextThreshold) {
140
- return '';
141
- }
142
- return str;
143
- },
144
- },
145
- watch: {
146
- percentage: {
147
- handler(val) {
148
- if (this.percentage >= MAX) {
149
- this.realPercentage = MAX;
150
- } else if (this.percentage <= MIN) {
151
- this.realPercentage = MIN;
152
- } else {
153
- this.realPercentage = val;
154
- }
155
- },
156
- immediate: true,
157
- },
158
- },
159
- methods: {},
160
- };
161
- </script>
162
-
163
- <style lang="scss" scoped>
164
- .ste-progress-root {
165
- position: relative;
166
- width: var(--progress-width);
167
- height: var(--progress-height);
168
-
169
- .inactive-box,
170
- .active-box {
171
- width: var(--progress-width);
172
- height: var(--progress-height);
173
- border-radius: 24rpx;
174
-
175
- background-repeat: repeat;
176
- background-size: contain;
177
- }
178
-
179
- .active-box {
180
- width: var(--active-width);
181
- position: absolute;
182
- left: 0;
183
- top: 0;
184
-
185
- display: flex;
186
- align-items: center;
187
- justify-content: var(--active-text-align);
188
- padding: var(--progress-padding);
189
-
190
- transition: width var(--active-transition-duration) ease;
191
-
192
- .text {
193
- color: var(--active-text-color);
194
- font-size: var(--active-text-font-size);
195
- vertical-align: middle;
196
- line-height: 0;
197
- }
198
- }
199
- }
200
- </style>
1
+ <template>
2
+ <view class="ste-progress-root" :style="[cmpRootCssVar]">
3
+ <view class="inactive-box" :style="[cmpInactiveStyle]"></view>
4
+ <view class="active-box line" :style="[cmpActiveStyle]" v-if="realPercentage > 0">
5
+ <slot v-if="haveSlot"></slot>
6
+ <text class="text" v-else>{{ cmpActiveText }}</text>
7
+ </view>
8
+ </view>
9
+ </template>
10
+
11
+ <script>
12
+ import utils from '../../utils/utils.js';
13
+ import useColor from '../../config/color.js';
14
+ let color = useColor();
15
+ /**
16
+ * ste-progress 进度条
17
+ * @description 进度条组件
18
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-progress
19
+ * @property {String} activeBg 进度条激活部分的背景 默认值 #0090FF
20
+ * @property {String} inactiveBg 进度条未激活部分的背景 默认值 #eeeeee
21
+ * @property {Number} percentage 进度条百分比 默认值 0
22
+ * @property {Number|String} strokeWidth 进度条的粗细，默认单位rpx 默认值 24
23
+ * @property {Boolean} disabled 是否禁用状态 默认 false
24
+ * @property {Number|String} width 进度条宽度 默认值 100%
25
+ * @property {Number} duration 进度条动画执行时间，单位秒，设置为 0 可以禁用动画 默认值 0.3
26
+ * @property {String} pivotText 进度文字内容
27
+ * @property {String} textColor 进度文字颜色 默认 #ffffff
28
+ * @property {String} textAlign 文本对齐方式 默认 right
29
+ * @property {String} textSize 文本字体大小，默认单位rpx 默认 16
30
+ * @property {Number} displayTextThreshold 默认文本显示阈值 默认 0
31
+ * @property {Number|String} borderRadius 进度条圆角值（单位rpx） 默认 24
32
+ */
33
+ const MIN = 0;
34
+ const MAX = 100;
35
+ export default {
36
+ group: '数据组件',
37
+ title: 'Progress 进度条',
38
+ name: 'ste-progress',
39
+ props: {
40
+ activeBg: {
41
+ type: [String, null],
42
+ default: '',
43
+ },
44
+ inactiveBg: {
45
+ type: [String, null],
46
+ default: '#eeeeee',
47
+ },
48
+ percentage: {
49
+ type: [Number, null],
50
+ default: 0,
51
+ },
52
+ strokeWidth: {
53
+ type: [String, Number, null],
54
+ default: 24,
55
+ },
56
+ disabled: {
57
+ type: [Boolean, null],
58
+ default: false,
59
+ },
60
+ width: {
61
+ type: [String, Number, null],
62
+ default: '100%',
63
+ },
64
+ duration: {
65
+ type: [Number, null],
66
+ default: 0.3,
67
+ },
68
+ pivotText: {
69
+ type: [String, null],
70
+ default: '',
71
+ },
72
+ textColor: {
73
+ type: [String, null],
74
+ default: '#ffffff',
75
+ },
76
+ textAlign: {
77
+ type: [String, null],
78
+ default: 'right',
79
+ },
80
+ textSize: {
81
+ type: [String, Number, null],
82
+ default: 16,
83
+ },
84
+ displayTextThreshold: {
85
+ type: [Number, null],
86
+ default: 0,
87
+ },
88
+ borderRadius: {
89
+ type: [String, Number, null],
90
+ default: 24,
91
+ },
92
+ },
93
+ data() {
94
+ return {
95
+ realPercentage: 0,
96
+ haveSlot: false,
97
+ };
98
+ },
99
+ created() {},
100
+ mounted() {
101
+ this.haveSlot = this.$slots.default;
102
+ },
103
+ computed: {
104
+ cmpRootCssVar() {
105
+ const style = {
106
+ '--progress-width': utils.formatPx(this.width),
107
+ '--progress-height': utils.formatPx(this.strokeWidth),
108
+ '--progress-border-radius': utils.formatPx(this.borderRadius),
109
+ // #ifdef MP-WEIXIN || MP-ALIPAY
110
+ '--progress-padding': this.$slots.default ? '0' : '0 16rpx',
111
+ // #endif
112
+ // #ifdef H5
113
+ '--progress-padding': this.$slots.default ? '0' : '0 8px',
114
+ // #endif
115
+ '--active-width': this.realPercentage + '%',
116
+ '--active-text-align': this.textAlign == 'right' ? 'flex-end' : this.textAlign,
117
+ '--active-text-color': this.textColor,
118
+ '--active-text-font-size': utils.formatPx(this.textSize),
119
+ '--active-transition-duration': `${this.duration}s`,
120
+ };
121
+ return style;
122
+ },
123
+ cmpInactiveStyle() {
124
+ let style = {};
125
+ if (this.disabled) {
126
+ style.backgroundColor = '#eeeeee';
127
+ } else {
128
+ const bg = utils.bg2style(this.inactiveBg);
129
+ style = { ...style, ...bg };
130
+ }
131
+ return style;
132
+ },
133
+ cmpActiveStyle() {
134
+ let style = {};
135
+ if (this.disabled) {
136
+ style.backgroundColor = '#cccccc';
137
+ } else {
138
+ const bg = utils.bg2style(this.activeBg ? this.activeBg : color.getColor().steThemeColor);
139
+ style = { ...style, ...bg };
140
+ }
141
+ return style;
142
+ },
143
+ cmpActiveText() {
144
+ let str = this.pivotText ? this.pivotText : this.realPercentage <= MIN ? '' : `${this.realPercentage}%`;
145
+ if (this.displayTextThreshold > 0 && this.realPercentage < this.displayTextThreshold) {
146
+ return '';
147
+ }
148
+ return str;
149
+ },
150
+ },
151
+ watch: {
152
+ percentage: {
153
+ handler(val) {
154
+ if (this.percentage >= MAX) {
155
+ this.realPercentage = MAX;
156
+ } else if (this.percentage <= MIN) {
157
+ this.realPercentage = MIN;
158
+ } else {
159
+ this.realPercentage = val;
160
+ }
161
+ },
162
+ immediate: true,
163
+ },
164
+ },
165
+ methods: {},
166
+ };
167
+ </script>
168
+
169
+ <style lang="scss" scoped>
170
+ .ste-progress-root {
171
+ position: relative;
172
+ width: var(--progress-width);
173
+ height: var(--progress-height);
174
+
175
+ .inactive-box,
176
+ .active-box {
177
+ width: var(--progress-width);
178
+ height: var(--progress-height);
179
+ border-radius: var(--progress-border-radius);
180
+
181
+ background-repeat: repeat;
182
+ background-size: contain;
183
+ }
184
+
185
+ .active-box {
186
+ width: var(--active-width);
187
+ position: absolute;
188
+ left: 0;
189
+ top: 0;
190
+
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: var(--active-text-align);
194
+ padding: var(--progress-padding);
195
+
196
+ transition: width var(--active-transition-duration) ease;
197
+
198
+ .text {
199
+ color: var(--active-text-color);
200
+ font-size: var(--active-text-font-size);
201
+ vertical-align: middle;
202
+ line-height: 0;
203
+ }
204
+ }
205
+ }
206
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stellar-ui-v2",
3
- "version": "1.40.2",
3
+ "version": "1.40.3",
4
4
  "description": "StellarUI组件库",
5
5
  "main": "stellar-ui/index.js",
6
6
  "private": false,