vue input框，限制只能输入金额类型的数据

1. 在 270032_Wages_Accounting_Management_System_Vue\src\components\common文件夹下面新建一个inputFloat.js文件，文件内容如下：

   import Vue from 'vue';
   
   Vue.directive('inputFloat', {
     bind(el, binding, vnode) {
       let input = el.getElementsByTagName('input')[0];
       input.addEventListener('compositionstart', () => {
         vnode.inputLocking = true
       })
       input.addEventListener('compositionend', () => {
         vnode.inputLocking = false
         input.dispatchEvent(new Event('input'))
       })
       input.addEventListener('input', () => {
         if(vnode.inputLocking) {
           return;
         }
         let oldValue = input.value;
         let newValue = input.value;
         newValue = newValue.replace(/[^\d.]/g, '');
         newValue = newValue.replace(/^\./g, '');
         newValue = newValue.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
         newValue = newValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
         if(newValue) {
           let arr = newValue.split('.')
           newValue = Number(arr[0]) + (arr[1] === undefined ? '' : '.' + arr[1]) // 去掉开头多余的0
         }
         // 判断是否需要更新，避免进入死循环
         if(newValue !== oldValue) {
           input.value = newValue
           input.dispatchEvent(new Event('input')) // 通知v-model更新
         }
       })
       // input 事件无法处理小数点后面全是零的情况 因为无法确定用户输入的0是否真的应该清除，如3.02。放在blur中去处理
       input.addEventListener('blur', () => {
         let oldValue = input.value;
         let newValue = input.value;
         if(newValue) {
           newValue = Number(newValue).toFixed(2)
         }
         // 判断是否需要更新，避免进入死循环
         if(newValue !== oldValue) {
           input.value = newValue
           input.dispatchEvent(new Event('input')) // 通知v-model更新
         }
       })
     }
   })
   

2. 在main.js 文件中增加引用语句

   import './components/common/directives';
   import './components/common/inputFloat';

   

3. 使用：

     <el-form-item label="结束金额" prop="wtsdi_amount_end">
             <el-input v-model.trim="model.wtsdi_amount_end" style="width: 300px;" v-inputFloat /><span>(元)</span>
           </el-form-item>