点击后的效果，一秒后会恢复可点击
左边是组件按钮，通过disabled控制
右边普通按钮通过自定义指令控制，这里自定义指令写法是html版本的
javascript"><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>
