vue输入限制指令【只允许数字、去除空格功能】

AI前端高级工程师

已于 2023-01-29 16:29:24 修改

阅读量477

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-01-01 19:04:59 首次发布

本文链接：https://blog.csdn.net/weixin_43837268/article/details/128514734

前端专栏收录该内容

44 篇文章

订阅专栏

文章展示了如何在Vue.js中创建自定义指令，如`onlyNumber`和`removeSpace`，用于限制用户输入，只允许输入数字、小数点和负号，并处理输入的精度和范围。这些指令通过监听键盘事件，动态改变输入框的值并触发相应的input和change事件。

1、项目结构：

directiver

inputlimit

index.js

onlynumber.js

removespace.js

2、index.js

import onlyNumber from "./onlynumber";
import removeSpace from "./removespace";
const install = Vue => {
    Vue.directive("onlyNumber", onlyNumber);
    Vue.directive("removeSpace", removeSpace);
};
/*
  Vue.use( plugin )
  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
  如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
  该方法需要在调用 new Vue() 之前被调用。
  当 install 方法被同一个插件多次调用，插件将只会被安装一次。
*/
 
if (window.Vue) {
    window["onlyNumber"] = onlyNumber;
  Vue.use(install); // eslint-disable-line
}
 
onlyNumber.install = install;
export default onlyNumber;

3、onlynumber.js

export default {
    inserted (el, vDir, vNode) {
        // vDir.value 有指令的参数
        let content;
        // 设置输入框的值,触发input事件,改变v-model绑定的值
        const setVal = val => {
            if (vNode.componentInstance) {
                // 如果是自定义组件就触发自定义组件的input事件
                vNode.componentInstance.$emit("input", val);
            } else {
                // 如果是原生组件就触发原生组件的input事件
                el.value = val;
                el.dispatchEvent(new Event("input"));
            }
        };
        // 按键按下=>只允许输入 数字/小数点/减号
        el.addEventListener("keypress", event => {
            const e = event || window.event;
            const inputKey = String.fromCharCode(typeof e.charCode === "number" ? e.charCode : e.keyCode);
            const re = /\d|\.|-/;
            content = e.target.value;
            // 定义方法,阻止输入
            function preventInput () {
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
            }
            if (!re.test(inputKey) && !e.ctrlKey) {
                preventInput();
            } else if (content.indexOf(".") > 0 && inputKey === ".") {
                // 已有小数点,再次输入小数点
                preventInput();
            }
        });
        // 按键弹起=>并限制最大最小
        el.addEventListener("keyup", event => {
            const e = event || window.event;
            content = parseFloat(e.target.value);
            if (!content) {
                content = 0.00;
            }
            let arg_max = "";
            let arg_min = "";
            if (vDir.value) {
                arg_max = parseFloat(vDir.value.max);
                arg_min = parseFloat(vDir.value.min);
            }
            if (arg_max !== undefined && content > arg_max) {
                setVal(arg_max);
                content = arg_max;
            }
            if (arg_min !== undefined && content < arg_min) {
                setVal(arg_min);
                content = arg_min;
            }
        });
        // 失去焦点=>保留指定位小数
        el.addEventListener("focusout", event => { // 此处会在 el-input 的 @change 后执行
            const e = event || window.event;
            content = parseFloat(e.target.value);
            if (!content) {
                content = 0.00;
            }
            let arg_precision = 0;// 默认保留至整数
            if (vDir.value.precision) {
                arg_precision = parseFloat(vDir.value.precision);
            }
            e.target.value = Number(content.toFixed(arg_precision));
            setVal(e.target.value);
        // -- callback写法1
        // vNode.data.model.callback = ()=>{
        //     e.target.value = content.toFixed(arg_precision)
        // }
        // vNode.data.model.callback();
        // -- callback 写法2
        // vNode.data.model.callback(
        //     e.target.value = content.toFixed(arg_precision)
        // )
        });
    }
};

4、 removespace.js

export default {
    inserted (el) {
        let content;
        // 设置输入框的值,触发input事件,改变v-model绑定的值
        const setVal = val => {
            el.value = val;
            el.dispatchEvent(new Event("input")); //vue触发值的变化
        };
        // 按键按下=>只允许输入 数字/小数点/减号
        el.addEventListener("keypress", event => {
            const e = event || window.event;
            let inputKey = String.fromCharCode(typeof e.charCode === "number" ? e.charCode : e.keyCode);
            // 定义方法,阻止输入
            function preventInput () {
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
            }
            if (e.charCode == 32 || e.keyCode == 32) {
                preventInput();
            }
        });
        el.addEventListener("keyup", event => {
            const e = event || window.event;
            content = e.target.value.replace(/\s+/g,"");
            // setVal(content)
        });
    }
};