Amount 金融数字
金融数字,一般用于金额,数量等 1.4.0+
引入
import { Amount } from 'mand-mobile'
Vue.component(Amount.name, Amount)
代码演示
基本
<template>
<div class="md-example-child md-example-child-amount">
<p>
<span class="describe">Original</span>
<md-amount :value="1234.125" :precision="3"></md-amount>
</p>
<p>
<span class="describe">Round</span>
<md-amount :value="1234.125"></md-amount>
</p>
<p>
<span class="describe">Floor</span>
<md-amount :value="1234.123" :is-round-up="false"></md-amount>
</p>
</div>
</template>
<script>
import {Amount} from 'mand-mobile'
export default {
name: 'amount-demo',
components: {
[Amount.name]: Amount,
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-amount
text-align center
color #666
p
font-size 50px
span.describe
font-size 18px
</style>
变化动画
<template>
<div class="md-example-child md-example-child-amount">
<md-amount
:value="val"
:duration="800"
is-animated
></md-amount>
</div>
</template>
<script>
import {Amount} from 'mand-mobile'
export default {
name: 'amount-demo',
components: {
[Amount.name]: Amount,
},
data() {
return {
val: 1000,
}
},
mounted() {
setTimeout(() => {
this.val = 1500
setTimeout(() => {
this.val = 500
}, 2000)
}, 2000)
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-amount
text-align center
color #666
</style>
千位分隔符
<template>
<div class="md-example-child md-example-child-amount">
<md-amount
:value="1234"
has-separator
></md-amount>
</div>
</template>
<script>
import {Amount} from 'mand-mobile'
export default {
name: 'amount-demo',
components: {
[Amount.name]: Amount,
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-amount
text-align center
color #666
</style>
大写中文
<template>
<div class="md-example-child md-example-child-amount">
<md-amount
:value="1234"
is-capital
></md-amount>
</div>
</template>
<script>
import {Amount} from 'mand-mobile'
export default {
name: 'amount-demo',
components: {
[Amount.name]: Amount,
},
}
</script>
<style lang="stylus" scoped>
.md-example-child-amount
text-align center
font-size 32px
color #666
</style>
API
Amount Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
value | 数值 | Number | 0 | - |
precision | 数字精度 | Number | 2 | 小数点后保留几位 |
is-round-up | 数字精度取舍是否四舍五入 | Boolean | true | - |
has-separator | 数字是否有千位分隔符 | Boolean | false | - |
separator | 数字千位分隔符 | String | , | - |
is-capital | 数字是否转换为大写中文 | Boolean | false | - |
is-animated | 数字变化是否使用动画 | Boolean | false | - |
duration | 数字变化动画时长 | Number | 1000 | 单位ms |