按钮单击防抖指令 v-debounce

Vue 指令实现：按钮点击防抖

原创已于 2022-07-26 16:40:14 修改 · 874 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-01-07 14:10:16 首次发布

vue 专栏收录该内容

2 篇文章

订阅专栏

按钮单击防抖指令

import Vue from "vue";
Vue.directive('debounce', {
    inserted(el, binding, vnode) {
        el.addEventListener('click', (e) => {
            let timeout = 1000;
            if(binding.value) {
                timeout = binding.value;
            }
            const i = document.createElement('i');
            i.classList = ['el-icon-loading']
            el.classList.add('is-loading');
            el.append(i);
            el.disabled = true;
            setTimeout(() => {
                el.disabled = false;
                el.classList.remove('is-loading');
                i.remove();
            }, timeout);
        })
    }
})