当前位置：首页 > news >正文

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

news 来源：原创 2025/4/30 5:53:57

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);}};// 在失去焦点时触发 triminputEl.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

          />

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