Vue 前端框架中限制用户短时间内多次点击同一按钮的方法(例如:登录、注册)
一、首先在项目目录(自定义)下创建'controlClickState.js'文件,后在文件中定义如下内容:
// controlClickState.js 文件
export default {
install(Vue) {
// 禁止短时间内重复点击
Vue.directive('preventClick', {
inserted(button, bind) {
button.addEventListener('click', () => {
if (!button.disabled) {
button.disabled = true;
setTimeout(() => {
but.disabled = false
}, 6000)
}
})
}
})
}
}
二、在项目目录下的 main.js 入口文件引用定义好的 'controlClickState.js'文件
import preventClick from '../static/js/controlClickState'
Vue.use(preventClick)
三、在需要限制点击频率的组件中使用
<button v-preventClick>登录</button>
抟扶摇而上者九万里