Vue 自定义指令实现 el-input 自动去除首尾空格背景在项目中经常需要在用户输入完成后去除输入框内容的首尾空格尤其是使用 Element Plus 的el-input组件时。这篇笔记总结了如何通过自定义指令实现该功能。实现方式自定义指令代码创建一个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;指令解析获取输入框节点使用el.querySelector(input)获取el-input内部的原生 DOM 节点。实现核心逻辑当输入框失去焦点时调用trimHandler去除输入框内容的首尾空格。通过inputEl.value trimmedValue更新输入框显示的值。使用dispatchEvent手动触发原生input事件确保 Vue 的v-model能接收到更新。清理事件在指令卸载时移除事件监听器避免内存泄漏。全局注册指令在main.ts中注册指令import { createApp } from vue; import App from ./App.vue; import trim from ./directives/trim; const app createApp(App); app.directive(trim, trim); app.mount(#app);使用示例在组件中使用v-trim指令template div el-input v-modelqueryRecordParams.title placeholder请输入流程名称 classinput-with-select keyup.entergetRecordList v-trim / p绑定值{{ queryRecordParams.title }}/p /div /template script langts import { defineComponent, reactive } from vue; export default defineComponent({ setup() { const queryRecordParams reactive({ title: }); const getRecordList () { console.log(最终输入内容, queryRecordParams.title); }; return { queryRecordParams, getRecordList }; }, }); /script测试结果输入测试内容失去焦点后首尾空格被自动去除。queryRecordParams.title的值同步更新为测试内容。注意事项事件绑定机制el-input的v-model是通过update:modelValue或原生input事件触发的确保dispatchEvent能正确更新绑定值。DOM 操作与 Vue 绑定分离指令逻辑直接操作 DOM同时触发 Vue 的响应式更新保证两者一致性。组件兼容性该指令适用于el-input或其他内部包含原生input元素的组件。副业接单自有成熟开发团队项目自研不外包。承接 Java 全栈、小程序、APP、AI 智能体、爬虫脚本各类软件开发。全程闲鱼担保交付完整源码长沙可面谈无套路售后稳妥省心。闲鱼 ID程序员鱼鱼呀