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