- 在 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更新 } }) } })
-
在main.js 文件中增加引用语句
import './components/common/directives'; import './components/common/inputFloat';
-
使用:
<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>
vue input框,限制只能输入金额类型的数据
最新推荐文章于 2024-08-07 10:22:18 发布