Vue3 指令开发：自定义表情过滤器指令实现

在现代的 web 开发中，用户输入的内容往往需要经过一定的过滤，以确保数据的有效性和安全性。在这篇文章中，我们将介绍如何在 Vue 3 中自定义一个指令，用于过滤输入框中的表情符号以及其他非预期字符。

一、什么是自定义指令

在 Vue.js 中，自定义指令是一个强大而灵活的工具，允许开发者在元素上添加特定的行为。通过自定义指令，我们可以在 DOM 元素上实现一些特定的功能，比如输入过滤、格式化等。

二、指令实现的基本思路

我们将创建一个名为 emojiDirective 的指令，用于过滤输入框中的非法字符。该指令会在输入框中自动移除不符合规则的字符，并只保留中文、英文字母、数字及一些常见的标点符号。

1. 找到输入框元素

首先，我们需要一个函数 findEle，用于从指令的根元素中找到目标输入框：

let findEle = (parent, type) => {
    return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type);
};

这个函数会检查传入的父元素是否为目标类型（如 input），如果是则直接返回，否则使用 querySelector 查找子元素。

2. 触发输入事件

为了确保输入框的值能及时反映到 Vue 的数据模型中，我们需要一个 trigger 函数来手动触发输入事件：

const trigger = (el, type) => {
    const e = document.createEvent("HTMLEvents");
    e.initEvent(type, true, true);
    el.dispatchEvent(e);
};

这个函数会创建一个新的事件并派发，使得 Vue 能够监听到输入框的变化。

3. 定义过滤逻辑

自定义指令的核心逻辑在于过滤输入框中的内容。我们使用正则表达式来定义过滤规则：

var regRule = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g;

这个正则表达式的含义是：只允许中文、数字、字母以及少数几个标点符号，其他字符将被移除。

4. 完整的指令实现

综合以上部分，我们可以定义完整的 emojiDirective：

const emojiDirective = {
    beforeMount: function (el) {
        let $inp = findEle(el, "input");
        el.$inp = $inp;

        $inp.handle = function () {
            let val = $inp.value;
            $inp.value = val.replace(regRule, "");
            trigger($inp, "input");
        };
        $inp.addEventListener("keyup", $inp.handle);
    },
    unmounted: function (el) {
        el.$inp.removeEventListener("keyup", el.$inp.handle);
    },
};

export default emojiDirective;

在 beforeMount 钩子中，我们为输入框添加了 keyup 事件监听器，实时过滤用户输入的内容。在 unmounted 钩子中，我们确保在组件卸载时清除事件监听，避免内存泄漏。

三、使用指令

要使用这个指令，您只需在 Vue 组件中进行注册，并在模板中应用它：

import emojiDirective from './path/to/emojiDirective';

export default {
    directives: {
        emoji: emojiDirective
    }
};

<template>
    <div>
        <input v-emoji type="text" placeholder="请输入内容" />
    </div>
</template>

四、总结

通过这个自定义指令，我们可以有效地管理用户输入，确保数据的有效性与安全性。自定义指令的灵活性不仅限于过滤输入，还可以扩展到其他领域，如格式化、验证等。希望这篇文章能帮助您更好地理解和使用 Vue 3 的自定义指令功能，提升您的开发效率与代码质量。