vue自定义指令-防抖
使用场景:点击查询按钮 或者 点击提交保存按钮 的时候点击次数过多,会多次提交,为了避免这种情况发生,我们可以做个防抖,点击一次后 第二次需要间隔一定的时间才能再次点击。
这时候我们能想到可以用vue 的自定义指令directive来完成这个功能。
新建一个vue2项目 (cv即可使用)
src/components/HelloWorld.vue
<template>
<div>
<!-- v-debounce:xx ,xx可以是对象可以是字符串可以是数字 -->
<button v-debounce:3000="debounceClick">防抖</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
data() {},
methods: {
debounceClick(v) {
console.log("触发一下,间隔多少毫秒:", v);
},
},
};
</script>
新建 debounce.js
文件 src/directive/modules/debounce.js
const debounce = {
inserted: function (el, binding) {
// binding.arg 传进来的参数 可以
let s = (binding.arg * 1) || 1000
let timer
el.addEventListener('click', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value(s)
}, s)
})
},
}
export default debounce
在src/directive/index.js
里面引入 把 debounce.js
引入
import Vue from 'vue'
import debounce from './modules/debounce.js'
// 方式1
const files = require.context('./modules', false, /.+\.js$/)
// 按模块引入
// files.keys(): 打印出来为['./focus.js','/loadmore.js']
files.keys().forEach(fileName => {
const directiveConfig = files(fileName) // 获取指令函数
const directiveName = fileName // 获取指令名
.replace(/^\.\//, '') // 去除开头的'./'
.replace(/\.\w+$/, '') // 去除文件扩展名
Vue.directive(directiveName, directiveConfig.default || directiveConfig)
})
// 方式2
// Vue.directive('debounce', debounce)
在main.js
里面引入 import '@/directive/index.js'
import '@/directive/index.js'
import App from './App.vue'
import Vue from 'vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')