Vue 应用中确保所有输入框都禁止输入空格

        领导突然来了要求，需要在vue应用中禁止填入空格，以防止用户在复制粘贴其他文档内容时复制了多余的空格。

         由于应用中有七百多个input控件，不太可能一个个添加@input方法，所有得创建一个可复用的指令来实现这个功能。

        首先，在 Vue 应用中（在 main.js 或相应的入口文件中），注册一个自定义指令：

Vue.directive('no-space', {  
  // 当被绑定的元素挂载到 DOM 中时……  
  inserted: function (el) {  
    el.addEventListener('input', function (event) {  
      // 阻止空格字符的输入  
      if (event.target.value.includes(' ')) {  
        // 移除空格，并更新输入框的值  
        event.target.value = event.target.value.replace(/\s/g, '');  
        // 如果你需要触发 input 事件的更新（比如用于 v-model）  
        // 可以使用 Vue 的 nextTick 来确保 DOM 更新后再触发事件  
        Vue.nextTick(() => {  
          const event = new Event('input', { bubbles: true });  
          el.dispatchEvent(event);  
        });  
      }  
    });  
  }  
});

附带一提，只移除前后空格的正则为                

event.target.value = event.target.value.replace(/(^\s*)|(\s*$)/g,'');  

然后，在 Vue 组件模板中，可以将这个指令应用到任何你想要禁止空格的输入框上：

<template>  
  <div>  
    <input type="text" v-model="textInput" v-no-space placeholder="此输入框禁止空格" />  
    <!-- 其他输入框也可以应用 v-no-space 指令 -->  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      textInput: '',  
    };  
  },  
  // ... 其他选项  
};  
</script>

        现在，任何带有 v-no-space 指令的输入框都将自动阻止用户输入空格。这种方法的好处是你可以轻松地将这个指令应用到你的 Vue 应用中的任何输入框上，而无需为每个输入框单独编写事件处理逻辑。

        VSCode里批量将<el-input 替换为 <el-input v-no-space

        收工！！！