派发自定义事件

最新推荐文章于 2024-10-05 01:22:45 发布

shanchen---

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量81

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_42108281/article/details/137961742

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js中封装自定义指令，针对输入框的值进行过滤，并在特定条件触发自定义事件。重点展示了如何监听`blur`事件并处理输入值的清理和转换。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <input type="text" id="input">
    <script>
        var btn = document.querySelector("#btn");
        var el = document.querySelector("#input");
        // 派发自定义事件
        const trigger = (el, type) => {
            const e = document.createEvent('HTMLEvents');
            e.initEvent(type, true, true);
            el.dispatchEvent(e);
            console.log("派发事件");
        };
        el.addEventListener(
            'blur',
            () => {
                console.log('blur');
                el.value = 'blur';
                trigger(el, 'input');
            },
            false
        );
    </script>
</body>

</html>

场景：封装自定义指令，过滤相关值

export default {
    name: 'space',
    mounted(el, binding) {
        let bind = binding;
        const inputEl = el;
        const isExtra = el.querySelector('input') ? true : false;
        // 派发自定义事件
        el.addEventListener(
            'blur',
            function (e) {
                let val = el.value;
                if (isExtra) {
                    val = el.querySelector('input').value;
                }
                console.log(val, 'val改变了');

                if (val === null || val === '') {
                    el.value = '';
                    if (isExtra) {
                        el.querySelector('input').value = '';
                    }
                    return;
                }
                if (val) {
                    let temp = Object.keys(bind.modifiers)[0] || 'none';
                    // 添加指令可扩展
                    switch (temp) {
                        case 'side':
                            setTimeout(() => {
                                let newval = val.replace(/(^\s*)|(\s*$)/g, '');
                                el.value = newval ? newval : undefined;
                                trigger(el, 'input');
                                return;
                            });
                            break;
                        case 'numandstr':
                            setTimeout(() => {
                                let newval = val.replace(/[^\w\.\/]/gi, '');
                                el.value = newval ? newval : undefined;
                                trigger(el, 'input');
                                return;
                            });
                            break;
                        default:
                            setTimeout(() => {
                                let newval = val.toString().replace(/\s*/g, '');
                                el.value = newval ? newval : undefined;
                                trigger(el, 'input');
                                return;
                            });
                            break;
                    }
                }
            },
            false,
        );
        // el.$inputEl = inputEl;
        // el.$handler(el.$inputEl);
    },
    updated(el) {
        el.$handler && el.$handler(el.$inputEl);
    },
};
// 派发自定义事件
const trigger = (el, type) => {
    const e = document.createEvent('HTMLEvents');
    e.initEvent(type, true, true);
    el.dispatchEvent(e);
};