Merge pull request #854 from xiaoAriana/feature_amount_mask

amount support mask`
didi · Jun 25, 2024 · b3952c5 · b3952c5
2 parents a0f5323 + d2afd0e
commit b3952c5
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 2 deletions.
diff --git a/components/amount/README.en-US.md b/components/amount/README.en-US.md
@@ -33,3 +33,4 @@ The font `DIDIFD-Medium` is used in the component for the case show only, if nec
 |is-capital|convert to chinese capital|Boolean|`false`|-|
 |transition|use transition when value changes|Boolean|`false`|-|
 |duration|transition duration|Number|`1000`|unit `ms`|
+|mask<sup class="version-after">2.7.1+</sup>|use mask|Boolean|`false`|-|
diff --git a/components/amount/README.md b/components/amount/README.md
@@ -33,3 +33,4 @@ Vue.component(Amount.name, Amount)
 |is-capital|数字是否转换为大写中文|Boolean|`false`|-|
 |transition|数字变化是否使用动画|Boolean|`false`|-|
 |duration|数字变化动画时长|Number|`1000`|单位`ms`|
+|mask<sup class="version-after">2.7.1+</sup> |是否掩码|Boolean|`false`|-|
diff --git a/components/amount/demo/cases/demo4.vue b/components/amount/demo/cases/demo4.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="md-example-child md-example-child-amount">
+    <md-amount
+      :value="1234"
+      mask
+      precision="0"
+    ></md-amount>
+    <br>
+	</div>
+</template>
+
+<script>import {Amount} from 'mand-mobile'
+
+export default {
+  name: 'amount-demo',
+  /* DELETE */
+  title: '掩码展示',
+  titleEnUS: 'Mask Display',
+  /* DELETE */
+  components: {
+    [Amount.name]: Amount,
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.md-example-child-amount
+  text-align center
+  font-size 32px
+  color #666
+</style>

diff --git a/components/amount/demo/index.vue b/components/amount/demo/index.vue
@@ -15,9 +15,10 @@ import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
+import Demo4 from './cases/demo4'
 
 export default {
-  ...createDemoModule('amount', [Demo0, Demo1, Demo2, Demo3]),
+  ...createDemoModule('amount', [Demo0, Demo1, Demo2, Demo3, Demo4]),
 }
 </script>
 

diff --git a/components/amount/index.vue b/components/amount/index.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="md-amount" :class="{numerical: !isCapital}">
-    <template v-if="!isCapital">{{ formatValue | doPrecision(legalPrecision, isRoundUp) | doFormat(hasSeparator, separator) }}</template> <template v-else> {{ formatValue | doPrecision(4, isRoundUp) | doCapital }} </template>
+    <template v-if="!isCapital">{{ formatValue | doPrecision(legalPrecision, isRoundUp) | doFormat(hasSeparator, separator) | doMask(mask)}}</template> <template v-else> {{ formatValue | doPrecision(4, isRoundUp) | doCapital }} </template>
   </span>
 </template>
 
@@ -18,6 +18,13 @@ export default {
       const rounded = isRoundUp ? Math.round(exponentialForm) : Math.floor(exponentialForm)
       return Number(`${rounded}e-${precision}`).toFixed(precision)
     },
+    doMask(value, mask) {
+      if (mask) {
+        return value.toString().replace(/\d/g, '*')
+      } else {
+        return value
+      }
+    },
     doFormat(value, hasSeparator, separator) {
       if (!hasSeparator) {
         return value
@@ -78,6 +85,10 @@ export default {
       type: Number,
       default: 1000,
     },
+    mask: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {