需求复现

某项目中，要求限制输入框输入特殊字符（以“\”为例）

为什么有这个需求

对于输入的数据，例如输入的值带有“\”或“%”等特殊字符，在数据库查询或其他地方中，可能会被识别为转义字符或模糊匹配等等，所以需要做限制

具体实现

技术栈：Vue + Element-UI

实现：

在 Vue.js 中，可以通过 Vue.directive 创建全局自定义指令（全局指令的使用具体看Vue文档），并在该指令中使用正则表达式匹配特殊字符和 el-input 的 @input 监听方法，以实现在所有组件中禁止输入反斜杠的功能。

<!-- 在 main.js 或其他入口文件中注册全局指令 -->
import Vue from 'vue';
​
Vue.directive('no-backslash', {
  // bind 钩子函数会在指令绑定到元素时调用
  bind(el, binding, vnode) {
    // 绑定 @input 监听方法
    el.addEventListener('input', function (event) {
      // 获取输入的值
      const value = event.target.value;
      // 使用正则表达式检测反斜杠（根据需要匹配相应限制字符）
      const regex = /\\/;
      // 如果输入值包含反斜杠，则替换为空格
      if (regex.test(value)) {
        // 使用 replace 方法替换反斜杠为空格
        const newValue = value.replace(regex, ' ');
        // 将新值设置回输入框
        event.target.value = newValue;
        // 触发 @input 事件，使其更新组件中的数据
        vnode.componentInstance.$emit('input', newValue);
      }
    });
  },
});
​
// 在组件的模板中使用指令
<template>
  <el-input v-no-backslash v-model="inputValue"></el-input>
</template>
​
<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

在上述例子中，通过 Vue.directive 创建了一个名为 no-backslash 的全局指令。在 bind 钩子函数中，为输入框元素绑定了一个 input 事件监听器。当输入框的值发生变化时，通过正则表达式检测是否包含反斜杠，如果包含，则使用 replace 方法将反斜杠替换为空格，并将新值设置回输入框。最后，触发 @input 事件，使其更新组件中的数据。在组件的模板中，通过 v-no-backslash 使用该指令。

注：个人学习记录，如有不对的地方，欢迎各位佬指出。若有侵权，私信删。