当前位置：首页 > article >正文

【按钮防抖】el-button和普通按钮防抖，点击一次禁用一秒再恢复

article 2025/1/15 8:29:40

点击后的效果，一秒后会恢复可点击
左边是组件按钮，通过disabled控制
右边普通按钮通过自定义指令控制，这里自定义指令写法是html版本的
在这里插入图片描述

<body>
    <div id="app">
        <el-card>
            <p style="padding: 10px;">按钮控制防抖功能，两种按钮控制方式，一个通过disabled控制，一个通过vue自定义指令方式控制</p>
            <el-button type="primary" size='mini' @click="ceshi" :disabled="isButtonDisabled">主要按钮disabled控制</el-button>
            <button @click="ceshi2" v-click-disable>主要按钮vue自定义指令控制</button>
        </el-card>
    </div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data() {
            return {
                isButtonDisabled:false
            };
        },
        directives: {
            'click-disable': {
                bind(el, binding, vnode) {
                    el.addEventListener('click', () => {
                        el.disabled = true;
                        setTimeout(() => {
                            el.disabled = false;
                        }, 1000); // 1秒后恢复点击
                    });
                }
            }
        },
        methods: {
            ceshi() {
                this.isButtonDisabled = true;
                setTimeout(() => {
                    this.isButtonDisabled = false;
                }, 1000);
                console.log('点击了主要按钮1');
            },

            ceshi2(){
                console.log('点击了主要按钮2');
            }
        }
    })
</script>