Amount 金融数字

Scan me!

金融数字,一般用于金额,数量等 1.4.0+

引入

  1. import { Amount } from 'mand-mobile'
  2. Vue.component(Amount.name, Amount)

代码演示

基本

  1. <template>
  2. <div class="md-example-child md-example-child-amount">
  3. <p>
  4. <span class="describe">Original</span>
  5. <md-amount :value="1234.125" :precision="3"></md-amount>
  6. </p>
  7. <p>
  8. <span class="describe">Round</span>
  9. <md-amount :value="1234.125"></md-amount>
  10. </p>
  11. <p>
  12. <span class="describe">Floor</span>
  13. <md-amount :value="1234.123" :is-round-up="false"></md-amount>
  14. </p>
  15. </div>
  16. </template>
  17. <script>
  18. import {Amount} from 'mand-mobile'
  19. export default {
  20. name: 'amount-demo',
  21. components: {
  22. [Amount.name]: Amount,
  23. },
  24. }
  25. </script>
  26. <style lang="stylus" scoped>
  27. .md-example-child-amount
  28. text-align center
  29. color #666
  30. p
  31. font-size 50px
  32. span.describe
  33. font-size 18px
  34. </style>

变化动画

  1. <template>
  2. <div class="md-example-child md-example-child-amount">
  3. <md-amount
  4. :value="val"
  5. :duration="800"
  6. is-animated
  7. ></md-amount>
  8. </div>
  9. </template>
  10. <script>
  11. import {Amount} from 'mand-mobile'
  12. export default {
  13. name: 'amount-demo',
  14. components: {
  15. [Amount.name]: Amount,
  16. },
  17. data() {
  18. return {
  19. val: 1000,
  20. }
  21. },
  22. mounted() {
  23. setTimeout(() => {
  24. this.val = 1500
  25. setTimeout(() => {
  26. this.val = 500
  27. }, 2000)
  28. }, 2000)
  29. },
  30. }
  31. </script>
  32. <style lang="stylus" scoped>
  33. .md-example-child-amount
  34. text-align center
  35. color #666
  36. </style>

千位分隔符

  1. <template>
  2. <div class="md-example-child md-example-child-amount">
  3. <md-amount
  4. :value="1234"
  5. has-separator
  6. ></md-amount>
  7. </div>
  8. </template>
  9. <script>
  10. import {Amount} from 'mand-mobile'
  11. export default {
  12. name: 'amount-demo',
  13. components: {
  14. [Amount.name]: Amount,
  15. },
  16. }
  17. </script>
  18. <style lang="stylus" scoped>
  19. .md-example-child-amount
  20. text-align center
  21. color #666
  22. </style>

大写中文

  1. <template>
  2. <div class="md-example-child md-example-child-amount">
  3. <md-amount
  4. :value="1234"
  5. is-capital
  6. ></md-amount>
  7. </div>
  8. </template>
  9. <script>
  10. import {Amount} from 'mand-mobile'
  11. export default {
  12. name: 'amount-demo',
  13. components: {
  14. [Amount.name]: Amount,
  15. },
  16. }
  17. </script>
  18. <style lang="stylus" scoped>
  19. .md-example-child-amount
  20. text-align center
  21. font-size 32px
  22. color #666
  23. </style>

API

Amount Props

属性说明类型默认值备注
value数值Number0-
precision数字精度Number2小数点后保留几位
is-round-up数字精度取舍是否四舍五入Booleantrue-
has-separator数字是否有千位分隔符Booleanfalse-
separator数字千位分隔符String,-
is-capital数字是否转换为大写中文Booleanfalse-
is-animated数字变化是否使用动画Booleanfalse-
duration数字变化动画时长Number1000单位ms