Vue 自定义指令

关注公众号【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) => {
            //监控 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, ''); //将所有非数字的替换成空格
        };
    },
});

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