【已解决】表单输入抖动

程序员_Hjw

已于 2024-01-03 10:19:59 修改

阅读量286

点赞数

分类专栏： vue 文章标签：前端 javascript vue

于 2023-08-11 10:45:39 首次发布

本文链接：https://blog.csdn.net/weixin_44921894/article/details/132226048

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章讨论了在项目中，表单输入时频繁触发计算导致的资源浪费问题，提出通过移除oninput和change事件，仅在失去焦点或用户按下回车时进行数据处理，以提高性能。同时，作者还指出formValue的计算逻辑中存在多余的$emit事件。

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

一、在我们的项目中，表单输入会出现多次计算。

比如输入数量和单价，计算出总金额；

输入金额，反过来重新计算单价。

比如用户想输入100，那么，1,10,100都会被监测到并且进行计算，用户还没有输入完，而1和10的计算是没有必要的。

此时的代码：

<a-input
          v-else-if="dataForm.is_number == true"
          :value="formValue"
          :title="formValue"
          oninput="value=getNumberRule(value, dataForm)"
          @change="$emit('change', $event.target.value)"
          :placeholder="$t(`只能输入数字`)"
          :disabled="
            (sysNoteObj.isAdd == false &&
              dataForm.Column_Name == sysNoteObj.sysNoteFieldName) ||
            dataForm.Is_Readonly ||
            (['Y', 'V'].includes(sysNoteObj.approved) && isOnApprCondition) ||
            isSysNote
          "
          @blur="
            (['unit_price', 'clean_price'].includes(dataForm.Column_Name) &&
              $route.name == 'partPriceEdit') ||
            ['act_amt', 'act_pay_amt', 'agio_amt'].includes(
              dataForm.Column_Name
            )
              ? $emit('amoutChange', $event.target.value)
              : ''
          "
          @focus="
            ['unit_price', 'clean_price'].includes(dataForm.Column_Name) &&
            $route.name == 'partPriceEdit'
              ? $event.currentTarget.select()
              : ''
          "
          @keyup.enter.native="
            (['unit_price', 'clean_price'].includes(dataForm.Column_Name) &&
              $route.name == 'partPriceEdit') ||
            ['act_amt', 'act_pay_amt', 'agio_amt'].includes(
              dataForm.Column_Name
            )
              ? $emit('amoutChange', $event.target.value)
              : ''
          "
        />

可以看到，有oninput、@change、@blur、@keyup.enter.native，且逻辑都不相同

而且应该是@input

在@change可以看到每次改变都$emit，用户没输入完，就是浪费资源

二、解决办法

1、删掉oninput、@change，在失去焦点或回车时再把数据$emit出去

 <a-input
          v-else-if="dataForm.is_number == true"
          :value="formValue"
          :title="formValue"
          :placeholder="$t(`只能输入数字`)"
          :disabled="
            (sysNoteObj.isAdd == false &&
              dataForm.Column_Name == sysNoteObj.sysNoteFieldName) ||
            dataForm.Is_Readonly ||
            (['Y', 'V'].includes(sysNoteObj.approved) && isOnApprCondition) ||
            isSysNote
          "
          @blur="handleInput($event.target.value, dataForm)"
          @focus="
            ['unit_price', 'clean_price'].includes(dataForm.Column_Name) &&
            $route.name == 'partPriceEdit'
              ? $event.currentTarget.select()
              : ''
          "
          @keyup.enter.native="handleInput($event.target.value, dataForm)"
        />
        
        
        
        // 输入框规则，isHaveReturn为true,则不能emit出去
    handleInput(inputValue, dataForm) {
      let filteredValue = "";

      // 美格-订单详情-优惠券金额可以输入负数
      if (
        this.$route.name === "custOrderMGEdit" &&
        dataForm.Column_Name === "coupon_amt" &&
        this.$isMgBusiness
      ) {
        filteredValue = inputValue.replace(/[^0-9.-]/gi, "");
      } else if (
        (["unit_price", "clean_price"].includes(dataForm.Column_Name) &&
          this.$route.name == "partPriceEdit") ||
        ["act_amt", "act_pay_amt", "agio_amt"].includes(dataForm.Column_Name)
      ) {
        filteredValue = inputValue;

        this.$emit("amoutChange", filteredValue);
      } else {
        filteredValue = inputValue.replace(/[^0-9.]/gi, "");
      }

      this.$emit("change", filteredValue);
    },

可以看到，现在时输入完成后再把数据$emit出去，但是还是有多个$emit,我们的handleInput只$emit了一次，肯定在其他地方有$emit

computed: {
    formValue() {
    
    if (
        this.$route.name == "cashMGEdit" &&
        this.dataForm.Column_Name == "recv_or_refund"
      ) {
        this.$emit("change", "S");
        return this.$t("收款");
      } else if (
        this.$route.name == "refundEdit" &&
        this.dataForm.Column_Name == "recv_or_refund"
      ) {
        this.$emit("change", "T");
        return this.$t("退款");
      } 
      .......
      else {
        if (this.sysNoteObj.isAdd == true) {
          this.$emit("change", String(this.formValueA));
        }
        return String(this.formValueA);
      }
    }
   }
   
   
   把
   if (this.sysNoteObj.isAdd == true) {
          this.$emit("change", String(this.formValueA));
        }
        
        删掉

最终结果：