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
}
});
}
};
这段代码定义了一个Vue指令，名为trim。这个指令的作用是在用户输入文本后，自动去除前后的空白字符。它通过监听元素的失焦事件来实现这一功能。 具体来说，当指令被绑定到一个元素上时（在这个例子中，假设是el-input组件），会执行inserted钩子函数。这个函数会找到el-input内部的input或textarea元素，并为其添加一个blur事件监听器。当input或textarea元素失去焦点时，会触发这个监听器，调用一个处理函数，该函数会更新与v-model绑定的值，去除前后的空白字符。 此外，当指令所在的组件被销毁时，会执行unbind钩子函数。这个函数会移除之前添加的blur事件监听器，并清理相关的属性。
使用如下：
<el-input
v-model="formData.taskName"
v-trim
class="form-item-content--360"
:placeholder="$t('kbEvaluation.taskNamePlaceholder')"
maxlength="100"
show-word-limit
/>
