1.创建一个clickStatefrom.js文件
写上vue 全局指令
//clickStatefrom.js文件
export default {
install (Vue) {
// 防止重复点击
Vue.directive('preventClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 6000)
}
})
}
})
}
}
2.在main.js 入口文件引用
import preventClick from './utils/clickStatefrom' // 根据自己的路径
Vue.use(preventClick)
3.然后就可在全局使用了
<button @click="educe" v-preventClick >导出</button>
本文详细介绍如何在Vue项目中创建并使用一个全局防抖指令,以防止按钮等元素的重复点击,提升用户体验。通过创建clickStatefrom.js文件,定义Vue指令并在main.js中引入,即可在项目中任意组件上应用此防抖功能。

1万+

被折叠的 条评论
为什么被折叠?



