使用方法:在main.js文件中注册插件然后直接在<el-input>加入‘v-插件名’
(1)在main.js文件:
// 只能输入数字指令
import onlyNumber from '@/directive/only-number';
Vue.use(onlyNumber);
(2)在src/directive文件夹中
(2.1)inde.js文件(这里可以修改插件名,我的是‘only-number’)
import onlyNumber from './only-number';
const install = function (Vue) {
Vue.directive('only-number', onlyNumber);
};
if (window.Vue) {
window['only-number'] = onlyNumber;
Vue.use(install); // eslint-disable-line
}
onlyNumber.install = install;
export default onlyNumber;
(2.2)only-number.js文件(这里修改想象的正则表达式,匹配是否正确,不正确就要改成‘’)
export default {
inserted: function (el, binding, vNode) {
el.inputHandler = (e) => {
// 只能输入数字
if (!/^(?!0\d$)([1-9]\d?|100)$/.test(e.target.value)) {
// 输入不符合要求,可以执行适当的操作,比如清除输入
e.target.value = '';
}
};
el.keyupHandler = (e) => {
// 只能输入数字
if (!/^(?!0\d$)([1-9]\d?|100)$/.test(e.target.value)) {
// 输入不符合要求,可以执行适当的操作,比如清除输入
e.target.value = '';
}
if (vNode.componentInstance) {
// 如果是自定义组件就触发自定义组件的input事件
vNode.componentInstance.$emit('input', e.target.value);
} else {
// 如果是原生组件就触发原生组件的input事件
el.dispatchEvent(new Event('input'));
}
};
el.addEventListener('input', el.inputHandler);
el.addEventListener('keyup', el.keyupHandler);
},
// 解绑销毁事件
unbind(el) {
el.removeEventListener('input', el.inputHandler);
el.removeEventListener('keyup', el.keyupHandler);
},
};