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后续添加其他校验规则