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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xianniu-ui",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "private": false,
5
5
  "main": "lib/xianniu-ui.umd.min.js",
6
6
  "scripts": {
@@ -8,11 +8,19 @@
8
8
  >
9
9
  <slot name="prefix">{{ prefix }}</slot>
10
10
  </i><!--
11
- --><slot>{{
12
- formatValue
13
- | doPrecision(legalPrecision, isRoundUp, emptyValue)
14
- | doFormat(hasSeparator, separator)
15
- }}</slot><!--
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: 0,
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>
@@ -1,6 +1,6 @@
1
1
  .xn-card {
2
2
  background-color: #fff;
3
- padding: 0 30px;
3
+ padding: 0 24px;
4
4
  &-header {
5
5
  padding: 20px 0 13px 0;
6
6
  border-bottom: 1px solid #f2f2f2;
@@ -1,5 +1,5 @@
1
1
  // 先导入主题变量,确保所有变量都已定义
2
- @import './theme/index.scss';
2
+ // @import './theme/index.scss';
3
3
 
4
4
  @import './search.scss';
5
5
  @import './table.scss';