【VUE】vue金额输入组件（包括不可填写非数字，去除前后空格，去除逗号分隔符）

目录

vue金额输入组件

组件：amount-input.vue

父级引用：

---

vue金额输入组件

组件：amount-input.vue

<template>
  <div class="input-content">
    <el-input
      :placeholder="placeholder"
      v-model="amountValue"
      @input="handleAmountChange"
      :disabled="disabled"
      :style="styleValue"
    ></el-input>
  </div>
</template>

<script>
  export default {
    props: {
      amount: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请输入金额'
      },
      styleValue: {
        type: String,
        default: 'width: 150px'
      }
    },
    data() {
      return {
        amountValue: this.amount
      }
    },
    watch: {
      // 默认显示金额
      amount(val) {
        this.handleAmountChange(val)
      }
    },
    methods: {
      handleAmountChange(val) {
        // 去除前后空格
        let value = val.trim()
        // 去除，分隔符
        if (value.indexOf(',') !== -1) {
          value = value.split(',').join('')
          // 防止输入非数字,第一位可为负号
        } else if (isNaN(value) && value !== '-') {
          value = ''
        }
        this.amountValue = value
        this.$emit('handleAmountChange', value)
      }
    }
  }
</script>
<style lang='scss' scoped>
.input-content {
  display: inline-block;
}
</style>

父级引用：

<amount-input
   :styleValue="'width: 150px'"
   :amount="String(editData.deductionAmount || '')"
   :placeholder="'扣款金额（元）'"
   :disabled="editFlag"    
   @handleAmountChange="$set(editData, 'deductionAmount', $event)"
></amount-input>

import AmountInput from '@/components/amount-input.vue'

export default {
    components: {
        AmountInput
    },
    data() {
        return {
            editFlag: false,
            editData: {
                deductionAmount: ''
            }
        }
    }
}