vue3自定义指令,防止按钮多次点击执行操作
自定义节流操作(防抖)
- 在src下新建directive文件夹,新建index.ts文件
export default {
//自定义节流操作
preventReClick:{
mounted(el:any,binding:any){
el.addEventListener('click',()=>{
if(!el.disabled){
el.disabled = true
setTimeout(()=>{
el.disabled = false
},binding.value||2000) //2000ms间隔时间
}
})
}
}
}
- main.ts里面引入
import dir from './directive/index'
app.use(ElementPlus,{locale }).use(router).use(store).mount('#app');
app.directive('preventReClick', dir.preventReClick);
- 使用(500为定义的节流的时间,若不写,则为默认的2000ms)
<el-button v-preventReClick="500" type="primary" @click="login()">登录</el-button>