vue的自定义指令

本文以element为例

1.创建directive.js文件，并在main.js中引入这个文件

2.在directive.js文件中写上自己的指令，比如写一个只能输入数字的输入框指令

import Vue from 'vue'

Vue.directive('Int', {

    inserted: function (el) {

        const input = el.querySelector('.el-input__inner'); //注意这里element与ant不同   ant为 const input = el.querySelector(el);

        input.onkeyup = function (e) { 

            if (input.value.length === 1) {

                input.value = input.value.replace(/[^0-9]/g, '')

             }else{

                input.value = input.value.replace(/[^\d]/g, '')

            }     

        }

        input.onblur = function (e) {

            if (input.value.length === 1) {

                input.value = input.value.replace(/[^0-9]/g, '')

              }else{

                  input.value = input.value.replace(/[^\d]/g, '')

              }

            }

        }

    });

3.然后就可以使用了 v-指令名

<el-input v-model="listOrder" v-Int></el-input>

4后续添加其他校验规则