全局自定义指令实现千分位转化

1.表单中的金额的输入框里面的数据千分位转换，失去焦点转化为千分位格式，获取焦点变回正常格式

 可以自定义到小数点后几位

自定义指令;

// 注册全局指令

Vue.directive('thousandSeparator', {

  inserted(el, vDir, vNode,binding) {

    let content

    el.addEventListener('focusout', (event) => {

      // 此处会在 el-input 的 @change 后执行

      standard(event)

    })

    function standard(event) {

      const e = event || window.event

      content = parseFloat(e.target.value)

      let contnerplay=content.toString().replace(/[^0-9.]/g,'')

      const toFixed=vDir.value.toFixed

      e.target.value=contnerplay?comdify(content.toString(),toFixed):0

    }

    const comdify=function(s,n){

      if (s === '' || s === null || s === undefined || isNaN(Number(s))) {

        return s;

      }

     

      s = Number(s) ? Number(s) : s;

      n = (n >= 0 && n <= 20) ? n : 2;

     

      s = parseFloat(s).toFixed(n);

      let [integerPart, decimalPart] = s.split(".");

     

      integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

      decimalPart = (n > 0) ? `.${decimalPart}` : '';

     

      return `${integerPart}${decimalPart}`;

  }

    const delcommafy = function(num) {

      if (!num) return num

      num = num.toString()

      num = num.replace(/,/gi, '')

      return num

    }

    el.addEventListener('focusin', (event) => {

      const e = event || window.event

      e.target.value=e.target.value?delcommafy(e.target.value):content?content:''

    })

  },

})

使用方式;  toFixed 表示保留小数点后几位

el-input v-model="form.Plan_Settlement_Amount"  class="input" v-thousand-Separator="{toFixed:2}"/>

注意：进行千分位转换后，数据会变成String类型，但是后端需要的是Number类型。所以在把数据传给后端时需要转换数据类型。同理在数据回显时也需要将返回是Number数据类型转换为千分位形式的String类型

转换的方式：

//千分位格式化：10000转为10,000.00

export const comdify=(s,n)=>{

   

 if (s === '' || s === null || s === undefined || isNaN(Number(s))) {

        return s;

      }

      s = Number(s) ? Number(s) : s;

      n = (n >= 0 && n <= 20) ? n : 2;

      s = parseFloat(s).toFixed(n);

      let [integerPart, decimalPart] = s.split(".");

      integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

      decimalPart = (n > 0) ? `.${decimalPart}` : '';

      return `${integerPart}${decimalPart}`;

}

//千分位反格式化:10,000.00转为10000.00

export const delcommafy=(s)=>{ 

 if (!num) return num

      num = num.toString()

      num = num.replace(/,/gi, '')

      return num

}

 

使用方式：

this.$set(this.form, 'Plan_Settlement_Amount', Number(comdify(this.form.Plan_Settlement_Amount)))

this.form.Plan_Settlement_Amount =delcommafy(res.Data.contract.Plan_Settlement_Amount,2)