您现在的位置是:网站首页>前端技术>VueVue

VUE用指令实现按钮防止重复点击

神夜2020-08-01 11:23:29Vue4921人已围观文章来源:神夜个人博客

简介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条
  • 微信公众号:扫描二维码,关注我们