關(guān)注公眾號【Miles】查看更多技術(shù)文檔

完整代碼

參考文檔：https://blog.csdn.net/jinxin740202/article/details/109525820

1、指令代碼【文件名 inputcheck.js】

isNumber 是定義好的正則校驗(yàn) 可在頁面中自定義

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"
  />