简化清除输入框内部空格逻辑代码

最新推荐文章于 2024-08-19 16:01:20 发布

fury_123

最新推荐文章于 2024-08-19 16:01:20 发布

阅读量168

点赞数 2

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/kuang_nu/article/details/136652161

版权

本文介绍了如何在Vue项目中，利用`@blur`事件处理多个el-form-item的输入框，确保在触发blur时自动清除空格，提升代码效率。

摘要由CSDN通过智能技术生成

问:

<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逻辑.