版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/84953131
全局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>