el-input输入校验插件（正则表达式）

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