Skip to content

Commit

Permalink
Merge pull request #854 from xiaoAriana/feature_amount_mask
Browse files Browse the repository at this point in the history
amount support mask`
  • Loading branch information
qifeng0748 authored Jun 25, 2024
2 parents a0f5323 + d2afd0e commit b3952c5
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 2 deletions.
1 change: 1 addition & 0 deletions components/amount/README.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`|-|
1 change: 1 addition & 0 deletions components/amount/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`|-|
31 changes: 31 additions & 0 deletions components/amount/demo/cases/demo4.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion components/amount/demo/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
13 changes: 12 additions & 1 deletion components/amount/index.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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
Expand Down Expand Up @@ -78,6 +85,10 @@ export default {
type: Number,
default: 1000,
},
mask: {
type: Boolean,
default: false,
},
},
data() {
Expand Down

0 comments on commit b3952c5

Please sign in to comment.