iov-design 2.15.59 → 2.15.61
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 +148 -148
- package/lib/alert.js +24 -105
- package/lib/aside.js +24 -34
- package/lib/autocomplete.js +36 -240
- package/lib/avatar.js +21 -20
- package/lib/backtop.js +27 -52
- package/lib/badge.js +30 -58
- package/lib/breadcrumb-item.js +24 -53
- package/lib/breadcrumb.js +24 -37
- package/lib/button-group.js +24 -29
- package/lib/button.js +38 -60
- package/lib/calendar.js +29 -146
- package/lib/card.js +24 -51
- package/lib/carousel-item.js +30 -68
- package/lib/carousel.js +27 -159
- package/lib/cascader-panel.js +41 -64
- package/lib/cascader.js +37 -470
- package/lib/checkbox-button.js +28 -164
- package/lib/checkbox-group.js +24 -37
- package/lib/checkbox.js +35 -189
- package/lib/col.js +1 -0
- package/lib/collapse-item.js +27 -125
- package/lib/collapse.js +24 -37
- package/lib/color-picker.js +104 -424
- package/lib/container.js +24 -34
- package/lib/date-picker.js +126 -1981
- package/lib/descriptions-item.js +1 -0
- package/lib/descriptions.js +1 -0
- package/lib/dialog.js +24 -137
- package/lib/divider.js +29 -64
- package/lib/drawer.js +24 -139
- package/lib/dropdown-item.js +27 -45
- package/lib/dropdown-menu.js +24 -51
- package/lib/dropdown.js +21 -20
- package/lib/empty.js +24 -61
- package/lib/footer.js +24 -34
- package/lib/form-item.js +42 -128
- package/lib/form.js +27 -40
- package/lib/header.js +24 -34
- package/lib/icon.js +24 -29
- package/lib/image.js +36 -220
- package/lib/index.js +1 -1
- package/lib/infinite-scroll.js +1 -0
- package/lib/input-number.js +30 -163
- package/lib/input.js +42 -274
- package/lib/iov-design.common.js +1638 -11132
- package/lib/link.js +33 -55
- package/lib/loading.js +24 -77
- package/lib/locale/format.js +10 -10
- package/lib/main.js +24 -29
- package/lib/menu-item-group.js +24 -40
- package/lib/menu-item.js +27 -83
- package/lib/menu.js +21 -20
- package/lib/message-box.js +24 -321
- package/lib/message.js +30 -82
- package/lib/mixins/migrating.js +20 -20
- package/lib/notification.js +24 -109
- package/lib/option-group.js +24 -50
- package/lib/option.js +27 -76
- package/lib/page-header.js +24 -56
- package/lib/pagination.js +24 -97
- package/lib/popconfirm.js +24 -97
- package/lib/popover.js +24 -89
- package/lib/progress.js +30 -133
- package/lib/radio-button.js +29 -111
- package/lib/radio-group.js +24 -39
- package/lib/radio.js +36 -152
- package/lib/rate.js +24 -94
- package/lib/result.js +72 -187
- package/lib/row.js +1 -0
- package/lib/scrollbar.js +1 -0
- package/lib/select.js +48 -637
- package/lib/skeleton-item.js +36 -68
- package/lib/skeleton.js +28 -70
- package/lib/slider.js +36 -267
- package/lib/spinner.js +24 -51
- package/lib/statistic.js +24 -76
- package/lib/step.js +29 -118
- package/lib/steps.js +27 -40
- package/lib/submenu.js +21 -20
- package/lib/switch.js +24 -130
- package/lib/tab-pane.js +24 -52
- package/lib/table-column.js +1 -0
- package/lib/table.js +93 -633
- package/lib/tabs.js +34 -49
- package/lib/tag.js +22 -21
- package/lib/theme-chalk/base.css +1 -1
- package/lib/theme-chalk/button.css +1 -1
- package/lib/theme-chalk/calendar.css +1 -1
- package/lib/theme-chalk/cascader-panel.css +1 -1
- package/lib/theme-chalk/cascader.css +1 -1
- package/lib/theme-chalk/dropdown.css +1 -1
- package/lib/theme-chalk/index.css +1 -1
- package/lib/theme-chalk/iovfont.css +1 -1
- package/lib/theme-chalk/link.css +1 -1
- package/lib/theme-chalk/message-box.css +1 -1
- package/lib/theme-chalk/pagination.css +1 -1
- package/lib/theme-chalk/radio.css +1 -1
- package/lib/theme-chalk/select.css +1 -1
- package/lib/theme-chalk/table-column.css +1 -1
- package/lib/theme-chalk/table.css +1 -1
- package/lib/theme-chalk/tabs.css +1 -1
- package/lib/theme-chalk/tag.css +1 -1
- package/lib/theme-chalk/transfer.css +1 -1
- package/lib/time-picker.js +58 -820
- package/lib/time-select.js +42 -303
- package/lib/timeline-item.js +29 -75
- package/lib/timeline.js +21 -20
- package/lib/tooltip.js +1 -0
- package/lib/transfer.js +36 -299
- package/lib/tree.js +54 -243
- package/lib/upload.js +86 -654
- package/lib/utils/clickoutside.js +7 -7
- package/lib/utils/vue-popper.js +7 -7
- package/package.json +154 -154
- package/packages/autocomplete/src/autocomplete-suggestions.vue +76 -76
- package/packages/autocomplete/src/autocomplete.vue +285 -285
- package/packages/button/src/button.vue +90 -90
- package/packages/calendar/src/date-table.vue +200 -200
- package/packages/calendar/src/main.vue +280 -280
- package/packages/carousel/src/item.vue +138 -138
- package/packages/carousel/src/main.vue +315 -315
- package/packages/cascader/src/cascader.vue +776 -776
- package/packages/cascader-panel/src/cascader-menu.vue +138 -138
- package/packages/cascader-panel/src/cascader-node.vue +246 -246
- package/packages/cascader-panel/src/cascader-panel.vue +391 -391
- package/packages/cascader-panel/src/node.js +166 -166
- package/packages/cascader-panel/src/store.js +58 -58
- package/packages/checkbox/src/checkbox-button.vue +199 -199
- package/packages/checkbox/src/checkbox-group.vue +49 -49
- package/packages/checkbox/src/checkbox.vue +225 -225
- package/packages/collapse/src/collapse-item.vue +114 -114
- package/packages/color-picker/src/components/picker-dropdown.vue +121 -121
- package/packages/color-picker/src/main.vue +188 -188
- package/packages/date-picker/src/basic/date-table.vue +441 -441
- package/packages/date-picker/src/basic/month-table.vue +269 -269
- package/packages/date-picker/src/basic/time-spinner.vue +304 -304
- package/packages/date-picker/src/basic/year-table.vue +111 -111
- package/packages/date-picker/src/panel/date-range.vue +680 -680
- package/packages/date-picker/src/panel/date.vue +609 -609
- package/packages/date-picker/src/panel/month-range.vue +289 -289
- package/packages/date-picker/src/panel/time-range.vue +248 -248
- package/packages/date-picker/src/panel/time-select.vue +178 -178
- package/packages/date-picker/src/panel/time.vue +186 -186
- package/packages/date-picker/src/picker.vue +967 -967
- package/packages/descriptions/src/index.js +180 -180
- package/packages/dialog/src/component.vue +262 -262
- package/packages/drawer/src/main.vue +205 -205
- package/packages/dropdown/src/dropdown-item.vue +37 -37
- package/packages/dropdown/src/dropdown-menu.vue +63 -63
- package/packages/dropdown/src/dropdown.vue +293 -293
- package/packages/empty/src/index.vue +70 -70
- package/packages/form/src/form-item.vue +324 -324
- package/packages/form/src/form.vue +182 -182
- package/packages/image/src/image-viewer.vue +330 -330
- package/packages/image/src/main.vue +249 -249
- package/packages/infinite-scroll/src/main.js +150 -150
- package/packages/input/src/input.vue +477 -477
- package/packages/input-number/src/input-number.vue +283 -283
- package/packages/link/src/main.vue +2 -0
- package/packages/loading/src/directive.js +133 -133
- package/packages/loading/src/index.js +106 -106
- package/packages/menu/src/menu-item.vue +112 -112
- package/packages/menu/src/menu.vue +325 -325
- package/packages/menu/src/submenu.vue +349 -349
- package/packages/message/src/main.js +91 -91
- package/packages/message-box/src/main.js +216 -216
- package/packages/message-box/src/main.vue +333 -333
- package/packages/notification/src/main.js +94 -94
- package/packages/page-header/src/main.vue +30 -30
- package/packages/pagination/src/pagination.js +390 -390
- package/packages/popconfirm/src/main.vue +104 -104
- package/packages/popover/src/main.vue +239 -239
- package/packages/radio/src/radio-button.vue +115 -115
- package/packages/radio/src/radio-group.vue +115 -115
- package/packages/radio/src/radio.vue +148 -148
- package/packages/rate/src/main.vue +348 -348
- package/packages/scrollbar/src/bar.js +92 -92
- package/packages/scrollbar/src/main.js +130 -130
- package/packages/select/src/option-group.vue +60 -60
- package/packages/select/src/option.vue +171 -171
- package/packages/select/src/select-dropdown.vue +74 -74
- package/packages/select/src/select.vue +979 -979
- package/packages/slider/src/button.vue +238 -238
- package/packages/slider/src/main.vue +427 -427
- package/packages/statistic/src/main.vue +204 -204
- package/packages/steps/src/steps.vue +68 -68
- package/packages/switch/src/component.vue +182 -182
- package/packages/table/src/config.js +153 -153
- package/packages/table/src/filter-panel.vue +194 -194
- package/packages/table/src/store/current.js +76 -76
- package/packages/table/src/store/helper.js +41 -41
- package/packages/table/src/store/index.js +147 -147
- package/packages/table/src/store/watcher.js +502 -502
- package/packages/table/src/table-body.js +469 -469
- package/packages/table/src/table-column.js +328 -328
- package/packages/table/src/table-header.js +571 -571
- package/packages/table/src/table-layout.js +249 -249
- package/packages/table/src/table-row.js +101 -101
- package/packages/table/src/table.vue +740 -740
- package/packages/table/src/util.js +273 -273
- package/packages/tabs/src/tab-bar.vue +57 -57
- package/packages/tabs/src/tab-nav.vue +294 -294
- package/packages/tabs/src/tabs.vue +201 -201
- package/packages/tag/src/tag.vue +1 -1
- package/packages/theme-chalk/src/button.scss +416 -416
- package/packages/theme-chalk/src/cascader.scss +252 -252
- package/packages/theme-chalk/src/checkbox.scss +419 -419
- package/packages/theme-chalk/src/common/var.scss +795 -816
- package/packages/theme-chalk/src/form.scss +201 -201
- package/packages/theme-chalk/src/input.scss +591 -591
- package/packages/theme-chalk/src/iovfont.scss +803 -784
- package/packages/theme-chalk/src/link.scss +36 -19
- package/packages/theme-chalk/src/message-box.scss +207 -207
- package/packages/theme-chalk/src/mixins/_button.scss +136 -136
- package/packages/theme-chalk/src/mixins/mixins.scss +190 -190
- package/packages/theme-chalk/src/radio-button.scss +115 -115
- package/packages/theme-chalk/src/radio.scss +1 -0
- package/packages/theme-chalk/src/select.scss +270 -270
- package/packages/theme-chalk/src/table.scss +1 -2
- package/packages/theme-chalk/src/tabs.scss +755 -750
- package/packages/theme-chalk/src/tag.scss +4 -4
- package/packages/theme-chalk/src/upload.scss +568 -568
- package/packages/tooltip/src/main.js +242 -242
- package/packages/transfer/src/main.vue +231 -231
- package/packages/transfer/src/transfer-panel.vue +251 -251
- package/packages/tree/src/model/node.js +484 -484
- package/packages/tree/src/tree-node.vue +279 -279
- package/packages/tree/src/tree.vue +496 -496
- package/packages/upload/src/index.vue +420 -420
- package/packages/upload/src/upload-file.vue +98 -98
- package/packages/upload/src/upload-list.vue +115 -115
- package/packages/upload/src/upload-picture.vue +98 -98
- package/packages/upload/src/upload.vue +231 -231
- package/packages/upload/src/utils.js +31 -31
- package/src/directives/repeat-click.js +26 -26
- package/src/index.js +259 -259
- package/src/locale/format.js +46 -46
- package/src/locale/index.js +48 -48
- package/src/locale/lang/lo-LA.js +126 -126
- package/src/mixins/locale.js +9 -9
- package/src/mixins/migrating.js +54 -54
- package/src/transitions/collapse-transition.js +77 -77
- package/src/utils/clickoutside.js +76 -76
- package/src/utils/date-util.js +282 -282
- package/src/utils/popup/index.js +218 -218
- package/src/utils/popup/popup-manager.js +194 -194
- package/src/utils/util.js +245 -245
- package/src/utils/vdom.js +5 -5
- package/src/utils/vue-popper.js +198 -198
|
@@ -1,204 +1,204 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="el-statistic">
|
|
3
|
-
<div class="head" v-if="title||$slots.title">
|
|
4
|
-
<slot name="title">
|
|
5
|
-
<span class="title">
|
|
6
|
-
{{ title }}
|
|
7
|
-
</span>
|
|
8
|
-
</slot>
|
|
9
|
-
</div>
|
|
10
|
-
<div class="con">
|
|
11
|
-
<span class="prefix" v-if="prefix||$slots.prefix">
|
|
12
|
-
<slot name="prefix" >
|
|
13
|
-
{{ prefix }}
|
|
14
|
-
</slot>
|
|
15
|
-
</span>
|
|
16
|
-
<span class="number" :style="valueStyle">
|
|
17
|
-
<slot name="formatter"> {{ disposeValue }}</slot>
|
|
18
|
-
</span>
|
|
19
|
-
<span class="suffix" v-if="suffix||$slots.suffix">
|
|
20
|
-
<slot name="suffix">
|
|
21
|
-
{{ suffix }}
|
|
22
|
-
</slot>
|
|
23
|
-
</span>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</template>
|
|
27
|
-
|
|
28
|
-
<script>
|
|
29
|
-
import { isNumber, chain, multiply, padStart, reduce} from 'iov-design/src/utils/lodash';
|
|
30
|
-
export default {
|
|
31
|
-
name: 'ElStatistic',
|
|
32
|
-
data() {
|
|
33
|
-
return {
|
|
34
|
-
disposeValue: '',
|
|
35
|
-
timeTask: null,
|
|
36
|
-
REFRESH_INTERVAL: 1000 / 30
|
|
37
|
-
};
|
|
38
|
-
},
|
|
39
|
-
props: {
|
|
40
|
-
decimalSeparator: {
|
|
41
|
-
type: String,
|
|
42
|
-
default: '.'
|
|
43
|
-
},
|
|
44
|
-
groupSeparator: {
|
|
45
|
-
type: String,
|
|
46
|
-
default: ''
|
|
47
|
-
},
|
|
48
|
-
precision: {
|
|
49
|
-
type: Number,
|
|
50
|
-
default: null
|
|
51
|
-
},
|
|
52
|
-
value: {
|
|
53
|
-
type: [String, Number, Date],
|
|
54
|
-
default: ''
|
|
55
|
-
},
|
|
56
|
-
prefix: {
|
|
57
|
-
type: String,
|
|
58
|
-
default: ''
|
|
59
|
-
},
|
|
60
|
-
suffix: {
|
|
61
|
-
type: String,
|
|
62
|
-
default: ''
|
|
63
|
-
},
|
|
64
|
-
title: {
|
|
65
|
-
type: [String, Number],
|
|
66
|
-
default: ''
|
|
67
|
-
},
|
|
68
|
-
timeIndices: {
|
|
69
|
-
type: Boolean,
|
|
70
|
-
default: false
|
|
71
|
-
},
|
|
72
|
-
valueStyle: {
|
|
73
|
-
type: Object,
|
|
74
|
-
default: function() {
|
|
75
|
-
return {};
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
format: {
|
|
79
|
-
type: String,
|
|
80
|
-
default: 'HH:mm:ss:SSS'
|
|
81
|
-
},
|
|
82
|
-
rate: {
|
|
83
|
-
type: Number,
|
|
84
|
-
default: 1000
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
created() {
|
|
88
|
-
this.branch();
|
|
89
|
-
},
|
|
90
|
-
watch: {
|
|
91
|
-
value: function() {
|
|
92
|
-
this.branch();
|
|
93
|
-
},
|
|
94
|
-
groupSeparator() {
|
|
95
|
-
this.dispose();
|
|
96
|
-
},
|
|
97
|
-
mulriple() {
|
|
98
|
-
this.dispose();
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
methods: {
|
|
102
|
-
branch() {
|
|
103
|
-
let { timeIndices, countDown, dispose} = this;
|
|
104
|
-
if (timeIndices) {
|
|
105
|
-
countDown(this.value.valueOf() || this.value);
|
|
106
|
-
} else {
|
|
107
|
-
dispose();
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
magnification(num, mulriple = 1000, groupSeparator = ',') {
|
|
111
|
-
// magnification factor
|
|
112
|
-
const level = String(mulriple).length ;
|
|
113
|
-
return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
|
|
114
|
-
},
|
|
115
|
-
dispose() {
|
|
116
|
-
let { value, rate, groupSeparator } = this;
|
|
117
|
-
if (!isNumber(value)) return false;
|
|
118
|
-
if (this.precision) {
|
|
119
|
-
value = value.toFixed(this.precision);
|
|
120
|
-
}
|
|
121
|
-
let [integer, decimal] = String(value).split('.');
|
|
122
|
-
// 1000 multiplying power
|
|
123
|
-
if (groupSeparator) {
|
|
124
|
-
integer = this.magnification(integer, rate, groupSeparator);
|
|
125
|
-
}
|
|
126
|
-
let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
|
|
127
|
-
this.disposeValue = result;
|
|
128
|
-
return result;
|
|
129
|
-
},
|
|
130
|
-
diffDate(minuend, subtrahend) {
|
|
131
|
-
return Math.max(minuend - subtrahend, 0);
|
|
132
|
-
},
|
|
133
|
-
suspend(isStop) {
|
|
134
|
-
if (isStop) {
|
|
135
|
-
if (this.timeTask) {
|
|
136
|
-
clearInterval(this.timeTask);
|
|
137
|
-
this.timeTask = null;
|
|
138
|
-
}
|
|
139
|
-
} else {
|
|
140
|
-
this.branch();
|
|
141
|
-
}
|
|
142
|
-
return this.disposeValue;
|
|
143
|
-
},
|
|
144
|
-
formatTimeStr: function(time) {
|
|
145
|
-
let {format} = this;
|
|
146
|
-
const escapeRegex = /\[[^\]]*]/g;
|
|
147
|
-
const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
|
|
148
|
-
const timeUnits = [
|
|
149
|
-
['Y', 1000 * 60 * 60 * 24 * 365], // years
|
|
150
|
-
['M', 1000 * 60 * 60 * 24 * 30], // months
|
|
151
|
-
['D', 1000 * 60 * 60 * 24], // days
|
|
152
|
-
['H', 1000 * 60 * 60], // hours
|
|
153
|
-
['m', 1000 * 60], // minutes
|
|
154
|
-
['s', 1000], // seconds
|
|
155
|
-
['S', 1] // million seconds
|
|
156
|
-
];
|
|
157
|
-
let formatText = reduce(
|
|
158
|
-
timeUnits,
|
|
159
|
-
(con, item) => {
|
|
160
|
-
const name = item[0];
|
|
161
|
-
return con.replace(new RegExp(`${name}+`, 'g'), (match) => {
|
|
162
|
-
let sum = chain(time).divide(item[1]).floor(0).value();
|
|
163
|
-
time -= multiply(sum, item[1]);
|
|
164
|
-
return padStart(String(sum), String(match).length, 0);
|
|
165
|
-
});
|
|
166
|
-
},
|
|
167
|
-
format
|
|
168
|
-
);
|
|
169
|
-
let index = 0;
|
|
170
|
-
return formatText.replace(escapeRegex, () => {
|
|
171
|
-
const match = keepList[index];
|
|
172
|
-
index += 1;
|
|
173
|
-
return match;
|
|
174
|
-
});
|
|
175
|
-
},
|
|
176
|
-
stopTime(time) {
|
|
177
|
-
let result = true; // stop
|
|
178
|
-
if (time) {
|
|
179
|
-
this.$emit('change', time);
|
|
180
|
-
result = false;
|
|
181
|
-
} else {
|
|
182
|
-
result = true;
|
|
183
|
-
this.suspend(true);
|
|
184
|
-
this.$emit('finish', true);
|
|
185
|
-
}
|
|
186
|
-
return result;
|
|
187
|
-
},
|
|
188
|
-
countDown(timeVlaue) {
|
|
189
|
-
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
|
|
190
|
-
if (timeTask) return;
|
|
191
|
-
let than = this;
|
|
192
|
-
this.timeTask = setInterval(()=> {
|
|
193
|
-
let diffTiem = diffDate(timeVlaue, Date.now());
|
|
194
|
-
than.disposeValue = formatTimeStr(diffTiem);
|
|
195
|
-
stopTime(diffTiem);
|
|
196
|
-
}, REFRESH_INTERVAL);
|
|
197
|
-
this.$once('hook:beforeDestroy', () => {
|
|
198
|
-
suspend(true);
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-statistic">
|
|
3
|
+
<div class="head" v-if="title||$slots.title">
|
|
4
|
+
<slot name="title">
|
|
5
|
+
<span class="title">
|
|
6
|
+
{{ title }}
|
|
7
|
+
</span>
|
|
8
|
+
</slot>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="con">
|
|
11
|
+
<span class="prefix" v-if="prefix||$slots.prefix">
|
|
12
|
+
<slot name="prefix" >
|
|
13
|
+
{{ prefix }}
|
|
14
|
+
</slot>
|
|
15
|
+
</span>
|
|
16
|
+
<span class="number" :style="valueStyle">
|
|
17
|
+
<slot name="formatter"> {{ disposeValue }}</slot>
|
|
18
|
+
</span>
|
|
19
|
+
<span class="suffix" v-if="suffix||$slots.suffix">
|
|
20
|
+
<slot name="suffix">
|
|
21
|
+
{{ suffix }}
|
|
22
|
+
</slot>
|
|
23
|
+
</span>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script>
|
|
29
|
+
import { isNumber, chain, multiply, padStart, reduce} from 'iov-design/src/utils/lodash';
|
|
30
|
+
export default {
|
|
31
|
+
name: 'ElStatistic',
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
disposeValue: '',
|
|
35
|
+
timeTask: null,
|
|
36
|
+
REFRESH_INTERVAL: 1000 / 30
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
props: {
|
|
40
|
+
decimalSeparator: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: '.'
|
|
43
|
+
},
|
|
44
|
+
groupSeparator: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: ''
|
|
47
|
+
},
|
|
48
|
+
precision: {
|
|
49
|
+
type: Number,
|
|
50
|
+
default: null
|
|
51
|
+
},
|
|
52
|
+
value: {
|
|
53
|
+
type: [String, Number, Date],
|
|
54
|
+
default: ''
|
|
55
|
+
},
|
|
56
|
+
prefix: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: ''
|
|
59
|
+
},
|
|
60
|
+
suffix: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: ''
|
|
63
|
+
},
|
|
64
|
+
title: {
|
|
65
|
+
type: [String, Number],
|
|
66
|
+
default: ''
|
|
67
|
+
},
|
|
68
|
+
timeIndices: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
default: false
|
|
71
|
+
},
|
|
72
|
+
valueStyle: {
|
|
73
|
+
type: Object,
|
|
74
|
+
default: function() {
|
|
75
|
+
return {};
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
format: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: 'HH:mm:ss:SSS'
|
|
81
|
+
},
|
|
82
|
+
rate: {
|
|
83
|
+
type: Number,
|
|
84
|
+
default: 1000
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
created() {
|
|
88
|
+
this.branch();
|
|
89
|
+
},
|
|
90
|
+
watch: {
|
|
91
|
+
value: function() {
|
|
92
|
+
this.branch();
|
|
93
|
+
},
|
|
94
|
+
groupSeparator() {
|
|
95
|
+
this.dispose();
|
|
96
|
+
},
|
|
97
|
+
mulriple() {
|
|
98
|
+
this.dispose();
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
methods: {
|
|
102
|
+
branch() {
|
|
103
|
+
let { timeIndices, countDown, dispose} = this;
|
|
104
|
+
if (timeIndices) {
|
|
105
|
+
countDown(this.value.valueOf() || this.value);
|
|
106
|
+
} else {
|
|
107
|
+
dispose();
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
magnification(num, mulriple = 1000, groupSeparator = ',') {
|
|
111
|
+
// magnification factor
|
|
112
|
+
const level = String(mulriple).length ;
|
|
113
|
+
return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
|
|
114
|
+
},
|
|
115
|
+
dispose() {
|
|
116
|
+
let { value, rate, groupSeparator } = this;
|
|
117
|
+
if (!isNumber(value)) return false;
|
|
118
|
+
if (this.precision) {
|
|
119
|
+
value = value.toFixed(this.precision);
|
|
120
|
+
}
|
|
121
|
+
let [integer, decimal] = String(value).split('.');
|
|
122
|
+
// 1000 multiplying power
|
|
123
|
+
if (groupSeparator) {
|
|
124
|
+
integer = this.magnification(integer, rate, groupSeparator);
|
|
125
|
+
}
|
|
126
|
+
let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
|
|
127
|
+
this.disposeValue = result;
|
|
128
|
+
return result;
|
|
129
|
+
},
|
|
130
|
+
diffDate(minuend, subtrahend) {
|
|
131
|
+
return Math.max(minuend - subtrahend, 0);
|
|
132
|
+
},
|
|
133
|
+
suspend(isStop) {
|
|
134
|
+
if (isStop) {
|
|
135
|
+
if (this.timeTask) {
|
|
136
|
+
clearInterval(this.timeTask);
|
|
137
|
+
this.timeTask = null;
|
|
138
|
+
}
|
|
139
|
+
} else {
|
|
140
|
+
this.branch();
|
|
141
|
+
}
|
|
142
|
+
return this.disposeValue;
|
|
143
|
+
},
|
|
144
|
+
formatTimeStr: function(time) {
|
|
145
|
+
let {format} = this;
|
|
146
|
+
const escapeRegex = /\[[^\]]*]/g;
|
|
147
|
+
const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
|
|
148
|
+
const timeUnits = [
|
|
149
|
+
['Y', 1000 * 60 * 60 * 24 * 365], // years
|
|
150
|
+
['M', 1000 * 60 * 60 * 24 * 30], // months
|
|
151
|
+
['D', 1000 * 60 * 60 * 24], // days
|
|
152
|
+
['H', 1000 * 60 * 60], // hours
|
|
153
|
+
['m', 1000 * 60], // minutes
|
|
154
|
+
['s', 1000], // seconds
|
|
155
|
+
['S', 1] // million seconds
|
|
156
|
+
];
|
|
157
|
+
let formatText = reduce(
|
|
158
|
+
timeUnits,
|
|
159
|
+
(con, item) => {
|
|
160
|
+
const name = item[0];
|
|
161
|
+
return con.replace(new RegExp(`${name}+`, 'g'), (match) => {
|
|
162
|
+
let sum = chain(time).divide(item[1]).floor(0).value();
|
|
163
|
+
time -= multiply(sum, item[1]);
|
|
164
|
+
return padStart(String(sum), String(match).length, 0);
|
|
165
|
+
});
|
|
166
|
+
},
|
|
167
|
+
format
|
|
168
|
+
);
|
|
169
|
+
let index = 0;
|
|
170
|
+
return formatText.replace(escapeRegex, () => {
|
|
171
|
+
const match = keepList[index];
|
|
172
|
+
index += 1;
|
|
173
|
+
return match;
|
|
174
|
+
});
|
|
175
|
+
},
|
|
176
|
+
stopTime(time) {
|
|
177
|
+
let result = true; // stop
|
|
178
|
+
if (time) {
|
|
179
|
+
this.$emit('change', time);
|
|
180
|
+
result = false;
|
|
181
|
+
} else {
|
|
182
|
+
result = true;
|
|
183
|
+
this.suspend(true);
|
|
184
|
+
this.$emit('finish', true);
|
|
185
|
+
}
|
|
186
|
+
return result;
|
|
187
|
+
},
|
|
188
|
+
countDown(timeVlaue) {
|
|
189
|
+
let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
|
|
190
|
+
if (timeTask) return;
|
|
191
|
+
let than = this;
|
|
192
|
+
this.timeTask = setInterval(()=> {
|
|
193
|
+
let diffTiem = diffDate(timeVlaue, Date.now());
|
|
194
|
+
than.disposeValue = formatTimeStr(diffTiem);
|
|
195
|
+
stopTime(diffTiem);
|
|
196
|
+
}, REFRESH_INTERVAL);
|
|
197
|
+
this.$once('hook:beforeDestroy', () => {
|
|
198
|
+
suspend(true);
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
</script>
|
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div
|
|
3
|
-
class="el-steps"
|
|
4
|
-
:class="[
|
|
5
|
-
!simple && 'el-steps--' + direction,
|
|
6
|
-
simple && 'el-steps--simple'
|
|
7
|
-
]">
|
|
8
|
-
<slot></slot>
|
|
9
|
-
</div>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<script>
|
|
13
|
-
import Migrating from 'iov-design/src/mixins/migrating';
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
name: 'ElSteps',
|
|
17
|
-
|
|
18
|
-
mixins: [Migrating],
|
|
19
|
-
|
|
20
|
-
props: {
|
|
21
|
-
space: [Number, String],
|
|
22
|
-
active: Number,
|
|
23
|
-
direction: {
|
|
24
|
-
type: String,
|
|
25
|
-
default: 'horizontal'
|
|
26
|
-
},
|
|
27
|
-
alignCenter: Boolean,
|
|
28
|
-
simple: Boolean,
|
|
29
|
-
finishStatus: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: 'finish'
|
|
32
|
-
},
|
|
33
|
-
processStatus: {
|
|
34
|
-
type: String,
|
|
35
|
-
default: 'process'
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
data() {
|
|
40
|
-
return {
|
|
41
|
-
steps: [],
|
|
42
|
-
stepOffset: 0
|
|
43
|
-
};
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
methods: {
|
|
47
|
-
getMigratingConfig() {
|
|
48
|
-
return {
|
|
49
|
-
props: {
|
|
50
|
-
'center': 'center is removed.'
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
watch: {
|
|
57
|
-
active(newVal, oldVal) {
|
|
58
|
-
this.$emit('change', newVal, oldVal);
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
steps(steps) {
|
|
62
|
-
steps.forEach((child, index) => {
|
|
63
|
-
child.index = index;
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="el-steps"
|
|
4
|
+
:class="[
|
|
5
|
+
!simple && 'el-steps--' + direction,
|
|
6
|
+
simple && 'el-steps--simple'
|
|
7
|
+
]">
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
import Migrating from 'iov-design/src/mixins/migrating';
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
name: 'ElSteps',
|
|
17
|
+
|
|
18
|
+
mixins: [Migrating],
|
|
19
|
+
|
|
20
|
+
props: {
|
|
21
|
+
space: [Number, String],
|
|
22
|
+
active: Number,
|
|
23
|
+
direction: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: 'horizontal'
|
|
26
|
+
},
|
|
27
|
+
alignCenter: Boolean,
|
|
28
|
+
simple: Boolean,
|
|
29
|
+
finishStatus: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: 'finish'
|
|
32
|
+
},
|
|
33
|
+
processStatus: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: 'process'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
data() {
|
|
40
|
+
return {
|
|
41
|
+
steps: [],
|
|
42
|
+
stepOffset: 0
|
|
43
|
+
};
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
methods: {
|
|
47
|
+
getMigratingConfig() {
|
|
48
|
+
return {
|
|
49
|
+
props: {
|
|
50
|
+
'center': 'center is removed.'
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
|
|
56
|
+
watch: {
|
|
57
|
+
active(newVal, oldVal) {
|
|
58
|
+
this.$emit('change', newVal, oldVal);
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
steps(steps) {
|
|
62
|
+
steps.forEach((child, index) => {
|
|
63
|
+
child.index = index;
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
</script>
|