0.1.0 • Published 4 years ago

v-money-format v0.1.0

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

v-money-format

实现一个Vue的自定义金额格式化组件和指令,组件名:money-format;指令名:v-money-format

money

使用方法

注意:组件使用和指令使用时,v-model绑定时都需要加 .lazy 修饰符

全局使用
import Vue from 'vue'
import moneyFormat from 'v-money-format'

// register directive v-money-format and component <money-format>
Vue.use(moneyFormat, { precision: 2 })
作为组件使用
<template>
  <div>
    <money-format v-model.lazy="price" v-bind:config="config"></money-format>
  </div>
</template>

<script>
  import { MoneyFormat } from 'v-money-format'

  export default {
    components: { MoneyFormat },

    data () {
      return {
        price: 123.45,
        config: {
          thousands: '.',
          precision: 2
        }
      }
    }
  }
</script>
作为指令使用
<template>
  <div>
    <input v-model.lazy="price" v-money-format="config" />
  </div>
</template>

<script>
  import { VMoneyFormat } from 'v-money-format'

  export default {
    data () {
      return {
        price: 123.45,
        config: {
          thousands: '.',
          precision: 2
        }
      }
    },

    directives: { 'money-format': VMoneyFormat }
  }
</script>

属性参数

propertyRequiredTypeDefaultDescription
precisiontrueNumber2小数位数
thousandsfalseString千分位分隔符