网站免费部署工业设计作品网站

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