价格输入框，带分隔符

组件

<template>
    <div class="inputPrice">
        <input :style="{ width: width + 'px' }" :class="['inputStyle', sizeCss]" ref="input" size="small" v-model="money" placeholder="" @keyup="validateStr" />
    </div>
</template>

<script>
export default {
  props: {
    defaultValue: String, // 默认值
    width: String, // 宽度
    precision: Number, // 限制小数点后几位
    sizeCss: String // 尺寸
  },
  data () {
    return {
      money: ''
    }
  },
  created () {
    this.money = this.defaultValue
    this.validateStr()
  },
  methods: {
    validateStr () {
      let num = this.money.replace(/\s/g, '').replace(/[^\d.]/g, '')
      this.money = (num.toString().indexOf('.') !== -1)
        ? num.split('.')[0].toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.' + num.split('.')[1].slice(0, this.precision)
        : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')

      let value = ''
      this.money.lastIndexOf('.') === this.money.length - 1
        ? value = this.money.slice(0, this.money.length - 1).replace(/,/g, '')
        : value = this.money.replace(/,/g, '')
      this.$emit('changeValue', value)
    }
  }
}
</script>

<style scoped>
    .inputPrice {
        display: inline-block;
        /* margin: 20px; */
    }
    .inputStyle {
        border: 1px solid #dcdfe6;
        border-radius: 3px;
        color: #606266;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .samll {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }
    .mini {
        height: 28px;
        line-height: 28px;
        font-size: 13px;
    }
    .inputStyle:focus {
        border-color: rgba(102,175,233,.6);
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 1px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 1px rgba(102,175,233,.6);
        -webkit-user-select:auto;
        -moz-user-select:auto;
        user-select:auto;
    }
</style>

引用

<template>
    <div class="">
        <inputPrice :defaultValue="value" :width="'100'" :sizeCss="'mini'" :precision="2" @changeValue="value = $event"></inputPrice>
    </div>
</template>

<script>
import inputPrice from '@/components/inputPrice.vue'
export default {
  data () {
    return {
      value: '2000'
    }
  },
  components: {
    inputPrice
  },
}
</script>