vue2 element ui input输入格式限制

import Vue from "vue";

/**
 * element-input 输入限制
 *
 */
//v-positiveInteger  正整数
//v-positiveInteger.2  保留两位小数
//v-positiveInteger.4  保留四位小数
Vue.directive("positiveInteger", {
    bind(el, binding, vnode) {
        let dom = findDom(el, "el-input__inner");
        let modifiers = binding.modifiers
        let mantissa = 0
        for (let x in modifiers) {
            mantissa = x
        }
        el.handler = function () {
            if (vnode.inputLocking) {
                return;
            }
            if(mantissa) {
                let reg = new RegExp(`^\\D*(\\d*(?:\.\\d{0,${mantissa}})?).*$`, 'gmi')
                el.childNodes[1].value = el.childNodes[1].value.replace(reg, "$1");
            }else {
                el.childNodes[1].value = el.childNodes[1].value.replace(/\D+/g, "");
            }
            dom.dispatchEvent(new Event("input"));
            
        };
        dom.addEventListener("compositionstart", () => {
            vnode.inputLocking = true;
        });
        dom.addEventListener("compositionend", () => {
            vnode.inputLocking = false;
            dom.dispatchEvent(new Event("input"));
        });
        dom.onfocus = function () {
            if (dom.value == 0) {
                dom.value = "";
            }
        };
        el.addEventListener("keyup", el.handler);
        el.handler1 = function () {
            el.childNodes[1].value = el.childNodes[1].value;
            dom.dispatchEvent(new Event("input"));
        };
        el.childNodes[1].addEventListener("blur", el.handler1);
    },
    unbind(el) {
        el.removeEventListener("keyup", el.handler);
        el.childNodes[1].removeEventListener("blur", el.handler);
    },
});
//递归查找某个元素节点
function findDom(el, className) {
    let dom;
    for (let i = 0; i < el.childNodes.length; i++) {
        if (el.childNodes[i].nodeType == 1) {
            let str = el.childNodes[i].getAttribute("class");
            if (str.indexOf(className) > -1) {
                dom = el.childNodes[i];
                break;
            } else {
                dom = findDom(el.childNodes[i], className);
            }
        }
    }
    return dom;
}

参考文章

9 声望
1 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick64阅读 45.1k评论 18

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.3k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
vue中style scope深度访问新方式(:deep())
1、&gt;&gt;&gt;如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析&gt;&gt;&gt;,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
9 声望
1 粉丝
宣传栏