教學 金額輸輸入框設計(會自動帶千位元處理)

<template>
  <input v-model="dataValue"
            :disabled="disabled"
            @change="handlerchange"
            @focus="focusget"
            @blur="focusout"
            clearable>
  </input>
</template>

<script>
export default {
  name: "MoneyInput",
  created() {
    let self = this;
    self.dataValue = self.value;
    self.focusout();
  },
  props: {
    value: {
      type: [Number, String],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataValue:0,
      //disabled:false,
      isFocus:false,
    };
  },
  watch: {
    dataValue: {
      immediate: true,
      handler(val) {
        //回傳值要去除千分號處理
        val = parseInt(this.delcommafy(val));
        val = isNaN(val) ? 0 :val;
        this.$emit('input',val);
      },
    },
    value: {
      immediate: true,
      handler(val) {
        //外部數值改變連動處理
        let self = this;
        self.dataValue = val;
        if(self.isFocus==false){
          self.focusout();
        }
      },
    },
  },
  methods: {
    focusout(){
      let self = this;
      self.isFocus = false;    
      self.dataValue = self.comdify(self.delcommafy(self.dataValue));
    },
    focusget(){
      let self = this;
      self.isFocus = true;
      self.dataValue = self.delcommafy(self.dataValue);
    },
    handlerchange(){
      let self = this;
      self.$emit("change", self.value);
    },
    //數值加上千分號處理
    comdify(n) {
      if(!n) return n;
      let str = n.split('.');
      let re = /\d{1,3}(?=(\d{3})+$)/g;
      let n1 = str[0].replace(re, "$&,");
      return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}`;
    },
    //去除千分位中的‘，’
    delcommafy(num){
      if(!num) return num;
      num = num.toString();
      num = num.replace(/,/gi, '');
      return num;
    },
  },
}
</script>

<style scoped>

</style>

可直接引入後，帶入參數 value 或是 v-model 來處理控制。
引入值如果不是數值會轉帶為0出來。