vue2.7封装v-trim指令，失焦时清除输入框或者文本框的前后空格

最近更换了团队，团队项目对接的测试对于输入框空格的测试原则与以往的接触的测试要求不太一样，新的测试要求输入框失焦时去除前后空格，以前的测试要求提交数据是去除空格，所以对于新的测试要求决定封装一个指令进行处理，指令代码如下：

src/directives/trim/index.js

export default {
  install (Vue) {
    Vue.directive('trim', {
      inserted (el, binding, vnode) {
        // 获取el-input的input元素
        const input = el.querySelector('input') || el.querySelector('textarea');
        // 定义一个失焦事件处理函数
        const handleBlur = function () {
          // 更新v-model绑定的值
          vnode.componentInstance.$emit('input', vnode.componentInstance.value.trim())
        }
        // 给input元素添加失焦事件监听
        input.addEventListener('blur', handleBlur)
        // 给el元素添加一个属性，保存事件处理函数的引用
        el._handleBlur = handleBlur
      },
      // 当指令所在组件被销毁时
      unbind (el) {
        // 获取el-input的input元素
        const input = el.querySelector('input') || el.querySelector('textarea');
        // 获取之前保存的事件处理函数的引用
        const handleBlur = el._handleBlur
        // 移除input元素的失焦事件监听
        input.removeEventListener('blur', handleBlur)
        // 删除el元素的属性
        el._handleBlur = null
      }
    });
  }
};

main.ts中引入指令：

import trim from '@/directives/trim';

Vue.use(trim);

代码中使用：

<el-input
  v-model="basicForm.welcomeText" v-trim
  maxlength="200"
  show-word-limit type="textarea" :rows="3" :placeholder="$t('app.welcomePlaceholder')"
/>