美文网首页vue的套路
在vue中使用lodash的debounce(防抖函数)

在vue中使用lodash的debounce(防抖函数)

作者: 回不去的那些时光 | 来源:发表于2020-01-21 23:51 被阅读0次
  • 1、下载lodash
npm install lodash --save
  • 2、引入debounce防抖函数
import debounce from "lodash/debounce"; // 防抖函数
  • 3、使用

方式一:

// template  我这里用了ant-design-vue的input组件
<a-input @change="inputChange" />

// methods方法
inputChange: debounce(function(e) {
  console.log(e.target.value);
}, 500)

方式二:

// template  我这里用了ant-design-vue的input组件
<a-input @change="inputChange" />

// 生命周期钩子函数 created
created() {
    this.inputChange = debounce(this.inputChange, 500)
},
// methods方法
inputChange(e) {
  console.log(e.target.value);
}

两种方式实现的效果一模一样

相关文章

网友评论

    本文标题:在vue中使用lodash的debounce(防抖函数)

    本文链接:https://www.haomeiwen.com/subject/pfyyzctx.html