vue的el-input输入框 编写自定义指令进行自动过滤空格符号，可扩展

1.找到项目中的main文件，添加以下内容

Vue.directive('trimel', {
  bind(el, binding, vnode) {
    // 去除空格的函数   replace可修改扩展
    const trimValue = value => value.replace(/\s+/g, '')
    // 输入事件
    el.addEventListener('input', function(e) {
      e.target.value = trimValue(e.target.value)
      // 手动触发 input 事件以更新 v-model
      e.target.dispatchEvent(new Event('input'))
    })

    // 失去焦点事件
    el.addEventListener('blur', function(e) {
      e.target.value = trimValue(e.target.value)
      // 手动触发 change 事件以更新 v-model
      e.target.dispatchEvent(new Event('change'))
    })

    // 更改事件
    el.addEventListener('change', function(e) {
      e.target.value = trimValue(e.target.value)
      // 手动触发 input 事件以更新 v-model
      e.target.dispatchEvent(new Event('input'))
    })
  },

  unbind(el) {
    // 清理事件监听器
    el.removeEventListener('input', this)
    el.removeEventListener('blur', this)
    el.removeEventListener('change', this)
  }
})

2.使用该自定义指令，亲测可用

  <el-input v-trimel v-model="Name" placeholder="请输入"></el-input>