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