vue lodash element input @input 防抖

1、安装引入

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

2、使用

2-1、价格修改调接口

<el-inputv-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