Vue中的全局指令防止按钮重复点击
目录
- 全局指令防止按钮重复点击
- 1.common.js
- 2.在需要引入的页面引入(**.vue)
- 防重复点击(vue指令实现)
- 阻止快速点击按钮会重复多次调用接口的
全局指令防止按钮重复点击
1.common.js
首先引入Vue
import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 3000) } console.log(el.disabled) }) } }); export { preventReClick }
2.在需要引入的页面引入(**.vue)
在按钮上添加v-preventReClick
<el-button size="small" type="primary" @click="handleSave('form')" v-preventReClick>确定</el-button>
从common.js导入指令preventReClick
import preventReClick from '../common' //防多次点击,重复提交
防重复点击(vue指令实现)
阻止快速点击按钮会重复多次调用接口的
定义全局指令
// directive.js export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('repeatClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 1000) } }) } }) } }
在main.js引用
import directive from 'directive.js'; vue.use(directive );
按钮调用直接加v-preventReClick
<el-button v-repeatClick type="prismary" style="width:100%;" @click="handleSubmit"></el-button>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)