您现在的位置是:网站首页>前端技术>VueVue
VUE用指令实现按钮防止重复点击
神夜2020-08-01 11:23:29【Vue】4921人已围观文章来源:神夜个人博客
简介VUE用指令实现按钮防止重复点击,延迟执行点击事件
一、 新建click.js
/** * 防止多次点击 * **/ import Vue from 'vue' const preventReClick = Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 1500) } }) } }) export { preventReClick }2、main.js 中引入
import preventReClick from './util/click'
3、在页面中应用
<div class="invita-btn center" v-preventReClick @click="inviteFriends($event)"><span>邀请<br/>好友</span></div>
/*邀请好友*/
inviteFriends(e){
if(!e.target.disabled){
//处理业务逻辑
}
},
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们