
使用方法:在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);
	},
};
 




















