通过自定义指令的方式,这样简单方便
debounce.js
export default {
install(Vue) {
Vue.directive("debounce", {
// bind 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置,比如我们可以设置样式
bind(el) {
// console.log(el)
},
// 被绑定的元素插入到父节点时
inserted(el, binding) {
el.addEventListener('click', function () {
let time = binding.value.time;
let methods = binding.value.methods;
clearTimeout(el.timeId)
el.timeId = setTimeout(() => {
methods()
}, time);
})
}
})
}
}
main.js
import debounce from "./directive/debounce"
Use:
// 传入需要指定的时间,以及对应的事件处理函数
<template>
<div class="OrganizationManagement">
<div v-debounce="{ time: 1000, methods: clickHandle }">点我</div>
</div>
</template>
<script>
export default {
name: "OrganizationManagement",
data() {
return {
aaa:12
};
},
methods: {
clickHandle() {
console.log(this.aaa);
},
},
mounted() {},
};
</script>
<style scoped lang="less" scoped></style>
网友评论