自定义指令input中前面不能输入空格

vue3加el-input

封装自定义指令

utils/trim.ts

import type { Directive, DirectiveBinding } from 'vue';

const trim: Directive = {
  mounted(el, binding: DirectiveBinding) {
    // 获取 el-input 的 DOM 节点
    const inputEl = el.querySelector('input');
    if (!inputEl) {
      console.error('v-trim 指令只能用于包含 input 的元素');
      return;
    }

    // 创建 trim 处理函数
    const trimHandler = () => {
      const trimmedValue = inputEl.value.trim();
      if (trimmedValue !== inputEl.value) {
        // 更新 input 框显示的值
        inputEl.value = trimmedValue;

        // 手动触发 el-input 的 input 事件更新 v-model 绑定值
        const event = new Event('input', { bubbles: true });
        inputEl.dispatchEvent(event);
      }
    };

    // 在失去焦点时触发 trim
    inputEl.addEventListener('blur', trimHandler);

    // 保存处理器到元素属性中，方便解绑
    (el as any)._trimHandler = trimHandler;
  },
  unmounted(el) {
    // 清理事件绑定
    const trimHandler = (el as any)._trimHandler;
    if (trimHandler) {
      const inputEl = el.querySelector('input');
      inputEl?.removeEventListener('blur', trimHandler);
      delete (el as any)._trimHandler;
    }
  },
};

export default trim;

在main.ts中注册

import trim from '@/utils/trim';

app.directive('trim', trim);

使用，直接在el-input中

<el-input

            v-model="PrmContractChanges.searchForm.projectName"

            :placeholder="t('form.input')"

            clearable

            v-trim

          />

 

场景：用户在复制粘贴的时候，有时候复制进来的数据，前面会存在空格，可能会导致查询方法报错，此方法会自动清除数据前的空格，在查询数据中输入的空格是不会被清除的。