創(chuàng)建一個(gè)debounce文件夾棍潘，一個(gè)index.js一個(gè)debounce.js
import Debounce from './debounce'
const install = function(Vue) {
Vue.directive('Debounce', Debounce)
}
if (window.Vue) {
window.Debounce = Debounce
Vue.use(install); // eslint-disable-line
}
Debounce.install = install
export default Debounce
import { debounce } from '@/utils/index'
let debounceEle
let debounceFn
export default {
bind(el, { name, value, oldValue, expression, arg, modifiers }) {
debounceEle = debounce(value, 500, true)
debounceFn = function(e){
if (e.keyCode === 13) {
debounceEle()
}
}
const {enter, click} = modifiers
if (enter) {
// 元素上綁定回車事件
el.addEventListener('keydown', debounceFn, false)
}
if (click) {
el.addEventListener('click', debounceEle, false)
}
},
unbind(el, { modifiers }) {
const {enter, click} = modifiers
if (enter) {
el.removeEventListener('keydown', debounceFn)
}
if (click) {
el.removeEventListener('click', debounceEle)
}
debounceEle = null
}
}
組件中使用
import debounce from "@/directive/debounce/index.js"
directives:{ debounce },
// DOM使用
<el-button type="primary" v-debounce.click="()=>{queryList(1)}">查詢</el-button>
// JS中使用
mounted() {
// todo 回車事件
let _this = this;
this.debounce = debounce(function(){
_this.queryList(1)
},500,false)
document.onkeydown = function(e) {
_this.debounce()
};
},
