xianniu-ui 2.0.3 → 2.0.5
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/lib/style/card.css +1 -1
- package/lib/style/index.css +1 -1
- package/lib/xianniu-ui.common.js +144 -31
- package/lib/xianniu-ui.umd.js +144 -31
- package/lib/xianniu-ui.umd.min.js +2 -2
- package/package.json +1 -1
- package/packages/amount/main.vue +91 -6
- package/packages/style/src/card.scss +1 -1
- package/packages/style/src/index.scss +1 -1
package/package.json
CHANGED
package/packages/amount/main.vue
CHANGED
|
@@ -8,11 +8,19 @@
|
|
|
8
8
|
>
|
|
9
9
|
<slot name="prefix">{{ prefix }}</slot>
|
|
10
10
|
</i><!--
|
|
11
|
-
--><
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
--><template v-if="$slots.default">
|
|
12
|
+
<slot :format-value="formatUserValue">
|
|
13
|
+
<!-- 如果插槽内容只是简单文本,尝试格式化 -->
|
|
14
|
+
<span v-if="slotTextContent !== null && !isNaN(slotTextContent)">
|
|
15
|
+
{{ formatUserValue(parseFloat(slotTextContent)) }}
|
|
16
|
+
</span>
|
|
17
|
+
<!-- 否则显示原始插槽内容 -->
|
|
18
|
+
<slot v-else></slot>
|
|
19
|
+
</slot>
|
|
20
|
+
</template>
|
|
21
|
+
<template v-else>
|
|
22
|
+
{{ formattedValue }}
|
|
23
|
+
</template><!--
|
|
16
24
|
--><i
|
|
17
25
|
class="xn-amount-suffix"
|
|
18
26
|
:style="suffixStyle"
|
|
@@ -114,6 +122,11 @@ export default {
|
|
|
114
122
|
},
|
|
115
123
|
// 处理格式
|
|
116
124
|
doFormat(value, hasSeparator, separator) {
|
|
125
|
+
// 如果值为空或者是非数字字符串(如空值显示),直接返回
|
|
126
|
+
if (!value || isNaN(parseFloat(value))) {
|
|
127
|
+
return value;
|
|
128
|
+
}
|
|
129
|
+
|
|
117
130
|
if (!hasSeparator) {
|
|
118
131
|
return value;
|
|
119
132
|
}
|
|
@@ -167,10 +180,52 @@ export default {
|
|
|
167
180
|
legalPrecision() {
|
|
168
181
|
return this.precision > 0 ? this.precision : 0;
|
|
169
182
|
},
|
|
183
|
+
// 计算格式化后的值
|
|
184
|
+
formattedValue() {
|
|
185
|
+
// 如果有默认插槽内容,则不对插槽内容进行格式化
|
|
186
|
+
if (this.$slots.default) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// 应用精度和分隔符格式化
|
|
191
|
+
const value = this.formatValue;
|
|
192
|
+
const precisionValue = this.$options.filters.doPrecision(
|
|
193
|
+
value,
|
|
194
|
+
this.legalPrecision,
|
|
195
|
+
this.isRoundUp,
|
|
196
|
+
this.emptyValue
|
|
197
|
+
);
|
|
198
|
+
return this.$options.filters.doFormat(
|
|
199
|
+
precisionValue,
|
|
200
|
+
this.hasSeparator,
|
|
201
|
+
this.separator
|
|
202
|
+
);
|
|
203
|
+
},
|
|
204
|
+
// 获取默认插槽的文本内容
|
|
205
|
+
slotTextContent() {
|
|
206
|
+
if (!this.$slots.default || !this.$slots.default.length) {
|
|
207
|
+
return null;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
// 获取插槽内容
|
|
211
|
+
const slot = this.$slots.default[0];
|
|
212
|
+
|
|
213
|
+
// 如果是文本节点
|
|
214
|
+
if (slot.text) {
|
|
215
|
+
return slot.text.trim();
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
// 如果是简单的VNode且包含文本
|
|
219
|
+
if (slot.children && slot.children.length > 0 && slot.children[0].text) {
|
|
220
|
+
return slot.children[0].text.trim();
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
return null;
|
|
224
|
+
},
|
|
170
225
|
},
|
|
171
226
|
data() {
|
|
172
227
|
return {
|
|
173
|
-
formatValue:
|
|
228
|
+
formatValue: null,
|
|
174
229
|
isMounted: false,
|
|
175
230
|
};
|
|
176
231
|
},
|
|
@@ -180,6 +235,17 @@ export default {
|
|
|
180
235
|
methods: {
|
|
181
236
|
// 动画显示数值变化
|
|
182
237
|
$_doAnimateDisplay(fromValue = 0, toValue = 0) {
|
|
238
|
+
// 如果目标值为null,直接设置为null
|
|
239
|
+
if (toValue == null) {
|
|
240
|
+
this.formatValue = null;
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
// 如果起始值为null,设置为0
|
|
245
|
+
if (fromValue == null) {
|
|
246
|
+
fromValue = 0;
|
|
247
|
+
}
|
|
248
|
+
|
|
183
249
|
/* istanbul ignore next */
|
|
184
250
|
const step = (percent) => {
|
|
185
251
|
if (percent === 1) {
|
|
@@ -193,6 +259,25 @@ export default {
|
|
|
193
259
|
const verify = (id) => id;
|
|
194
260
|
Animate.start(step, verify, noop, this.duration);
|
|
195
261
|
},
|
|
262
|
+
// 格式化用户提供的值
|
|
263
|
+
formatUserValue(value) {
|
|
264
|
+
if (value == null || isNaN(value)) {
|
|
265
|
+
return this.emptyValue;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// 应用精度和分隔符格式化
|
|
269
|
+
const precisionValue = this.$options.filters.doPrecision(
|
|
270
|
+
value,
|
|
271
|
+
this.legalPrecision,
|
|
272
|
+
this.isRoundUp,
|
|
273
|
+
this.emptyValue
|
|
274
|
+
);
|
|
275
|
+
return this.$options.filters.doFormat(
|
|
276
|
+
precisionValue,
|
|
277
|
+
this.hasSeparator,
|
|
278
|
+
this.separator
|
|
279
|
+
);
|
|
280
|
+
},
|
|
196
281
|
},
|
|
197
282
|
};
|
|
198
283
|
</script>
|