vue防止重复点击的那些事

vue防止重复点击的那些事

原生的js方法

原理：使用timeout，设置标识，通过改变标识的防止重复点击

 <span  @click="reClick">点击</span>

data() {
            return {
                reClick:false,//防止重复点击标识 
            }
        },
methods: {
     // 选择开始日期
            reClick() {
                if(!this.reClick){
                    this.reClick=true;
                    setTimeout(()=>{
                        this.reClick=false;
                    },1000)
                }
            },
}

vue自定义指令

原理：通过改变button按钮的disabled属性防止重复点击

 <button v-preventReClick="1000"></button>

import vue from 'vue'
//防止按钮在一定时间内多次次点击
//使用方法 <button v-preventReClick="1000"></button>

function preventReClick () {
    vue.directive('preventReClick', {
        inserted(el, binding) {

            el.addEventListener('click', () => {
                console.log("bind",el)
                if(!el.disabled){
                    el.disabled=true;
                    setTimeout(()=>{
                        el.disabled=false;
                    },binding.value ||1000)
                }

            });


        }
    })
}

export{
    preventReClick
}

在man.js引入自定义文件

import mixins from '@/modules';

index.js

import { preventReClick } from './preventReClick';
const directives = {
    preventReClick,
};

export default directives