问:
<el-form-item
prop="operator"
label="操作人"
>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.operator"
@blur="trimEmail()"
placeholder="选填, 为空时默认为当前操作人"
></el-input>
<el-form-item
prop="nigIcon"
label="夜间icon地址"
:rules="{
required: true, message: '夜间icon地址不能为空', trigger: 'blur'
}"
>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.nigIcon"
@blur="trimEmail()"
placeholder="必填"
></el-input>
<el-form-item
prop="ligIcon"
label="日间icon地址"
:rules="{
required: true, message: '日间icon地址不能为空', trigger: 'blur'
}"
>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.ligIcon"
@blur="trimEmail()"
placeholder="必填"
></el-input>
<el-form-item
prop="url"
label="跳转链接"
:rules="{
required: true, message: '跳转链接不能为空', trigger: 'blur'
}"
>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.url"
@blur="trimEmail()"
placeholder="必填"
></el-input>
// 清除输入框内部空格逻辑
trimEmail() {
this.addDataForm.locationName = this.addDataForm.locationName.replace(/[\s\uFEFF]+/g, '');
},
现在有好几个el-form-item都是用了@blur,我希望在名称的输入框触发blur,也可以在其他的触发blur清除空格
回答:
如果你希望在一个输入框触发 blur 事件时,也能够触发清除空格的逻辑,并且这个逻辑可以被其他输入框共享,你可以将清除空格的方法稍作修改,使其接受一个参数来指定要清除空格的属性。然后,在每个输入框的 blur 事件中调用这个方法并传入相应的属性名称。
下面是如何修改你的代码来实现这一点:
html
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.operator"
@blur="handleBlur('operator')"
placeholder="选填, 为空时默认为当前操作人"
></el-input>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.nigIcon"
@blur="handleBlur('nigIcon')"
placeholder="必填"
></el-input>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.ligIcon"
@blur="handleBlur('ligIcon')"
placeholder="必填"
></el-input>
<el-input
v-if="!currentItem.goodsId"
v-model.trim="addDataForm.url"
@blur="handleBlur('url')"
placeholder="必填"
></el-input>
然后,在你的 Vue 组件中,更新 trimEmail 方法以接受一个参数并根据传入的属性名进行处理:
js
methods: {
handleBlur(prop) {
this.addDataForm[prop] = this.addDataForm[prop].replace(/[\s\uFEFF]+/g, '');
}
}
通过这种方式,当任何一个输入框失去焦点时,都会调用 handleBlur 方法,并根据传入的属性名来清除相应输入框中的空格。
从而简化代码,不需要多次写handleBlur逻辑.