關注公眾號【Miles】查看更多技術文檔
完整代碼
參考文檔：https://blog.csdn.net/jinxin740202/article/details/109525820
1、指令代碼【文件名 inputcheck.js】
isNumber 是定義好的正則校驗 可在頁面中自定義
import Vue from "vue";
Vue.directive('isNumber', {
bind(el) {
el.onkeypress = (event) => {
//監(jiān)控 event是否有值
if (event) {
return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
} else {
return ''
}
};
el.oninput = () => {
console.log('222',el.children[0].value);
el.children[0].value = el.children[0].value.replace(/\D/g, ''); //將所有非數(shù)字的替換成空格
};
},
});
var directive = {};
export default directive;
2、main.js 引入 【inputcheck == 指令文件夾名】
import inputcheck from './directive/module/inputcheck' // 引入指令
Vue.use(inputcheck) // 注冊指令
3、頁面input 引用 【v-isNumber == 指令名】
<el-input
v-model="row.unitNumber"
v-isNumber
:disabled="!is_task"
class="base-input"
/>
