Vue 自定义指令，保留两位位小数的正数

最新推荐文章于 2024-02-28 09:38:25 发布

原创最新推荐文章于 2024-02-28 09:38:25 发布 · 653 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

js utils 同时被 3 个专栏收录

17 篇文章

订阅专栏

13 篇文章

订阅专栏

vue.js

10 篇文章

订阅专栏

该博客介绍了Vue.js中自定义指令`enterNumberPoint3`的实现，用于限制输入最多3位小数的数字。通过监听键盘事件、粘贴事件，确保输入值在设定的格式内，并触发正确的输入更新。

html 部分

<el-input v-enterNumberPoint3> </el-input>

js部分

Vue.directive('enterNumberPoint3', {
        inserted: function (el, binding) {
            var trigger = function (el, type) {
                var e = document.createEvent('HTMLEvents')
                e.initEvent(type, true, true)
                el.dispatchEvent(e)
            }
            el.addEventListener('paste', function (e) {
                setTimeout(function () {
                    var input = fn(e, binding, 2);
                    trigger(input, 'input')
                }, 200)
            });
            el.addEventListener("keyup", function (e) {
                var input = fn(e, binding, 2);
                trigger(input, 'input')
            });
            el.addEventListener("keydown", function (e) {
                var input = fn(e, binding, 2);
                trigger(input, 'input')
            });
            el.addEventListener("shift", function (e) {
                var input = fn(e, binding, 2);
                trigger(input, 'input')
            });
        }
    });