本文以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>
网友评论