vue lodash element input @input 防抖

1、安裝引入

cnpm install lodash --save
import _ from "lodash";
           

2、使用

2-1、價格修改調接口

<el-input
 v-model="scope.row.itemPrice"
  type="number"
  placeholder="請輸入價格"
  @input="changePrice(scope.row)"
></el-input>
           

changePrice: _.debounce(async row => {
      row.itemCharge = Number(row.itemPrice) * Number(row.itemNumber);
      let params = {
        id: row.id,
        itemPrice: row.itemPrice,
        itemNumber: row.itemNumber,
        itemCharge: row.itemCharge
      };
      let res = await API["editPackageServiceLittleTypeById"](params);
      if (res.code != 1) return Message.error(res.message);
      Message.success(res.message);
    }, 500),
           

2-2、修改input

<el-input
  @input="changeTotalDiscountCharge"
   v-model.number="datalist.chargeSettle.totalDiscountCharge"
   :maxlength="20"
   type="number"
 ></el-input>
           

changeTotalDiscountCharge: _.debounce(function(e) {
      if (e < 0) {
        this.$message.error("優惠金額不能小于0");
        this.datalist.chargeSettle.totalDiscountCharge = 0;
        return;
      }
      if (e > Number(this.datalist.chargeSettleWay[0].payCharge)) {
        this.$message.error("優惠金額不能大于待付款金額");
        this.datalist.chargeSettle.totalDiscountCharge = 0;
        return;
      }

      this.datalist.chargeSettleWay[0].payCharge =
        Number(this.initTotal) - e - Number(this.initCheep);
    }, 500)
           

注意：在lodash的throttle方法中,可以直接使用function,而且額外的好處是無需重新指向this,在函數内部中,已經做了apply,是以這裡的this指向的就是vue執行個體,如果用箭頭函數，this為undefined