vue+element-自定義指令,防止重複提交
阿新 • • 發佈:2018-12-11
全域性directive的寫法 // 提交以後禁用按鈕一段時間,防止重複提交 import Vue from 'vue'; Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-disabled'); el.disabled = true; setTimeout(() => { el.disabled = false; el.classList.remove('is-disabled'); }, 3000) }) } });
區域性directive的寫法 directives:{ noMoreClick: { inserted(el, binding) { el.addEventListener('click', () => { el.classList.add('is-disabled'); el.disabled = true; setTimeout(() => { el.disabled = false; el.classList.remove('is-disabled'); }, 2000) }) } } },
使用:
<el-button size="small" class="clear-btn m-t-sm m-b-sm" @click="resetForm" v-no-more-click>
Confirm
</el-button>