使用 Vue 框架开发项目中，遇到个问题，就是在用户提交数据时，如果连续多次点击按钮，会触发多次，导致数据异常，因此需要限制用户短时间内多次点击同一按钮，只触发一次。
1. 自定义指令
利用元素的 disabled 属性，新建自定义指令，preventClick.js
1export default {
2 install(Vue) {
3 Vue.directive('preventClick', {
4 inserted(button, bind) {
5 button.addEventListener('click', () => {
6 if (!button.disabled) {
7 button.disabled = true;
8 setTimeout(() => {
9 but.disabled = false
10 }, 2000)
11 }
12 })
13 }
14 })
15 }
16}
在 main.js 中引入
组件中使用
2. 防抖函数
函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，
直到函数请求停止并超过时间间隔才会执行。
1export function debounce(fn, delay = 2000) {
2 // 记录上一次的延时器
3 var timer = null;
4 return function() {
5 var args = arguments;
6 var that = this;
7 // 清除上一次延时器
8 clearTimeout(timer)
9 timer = setTimeout(function() {
10 fn.apply(that,args)
11 }, delay);
13}
导入到组件中使用
在vue中开发中，关于计时器的使用也是比较常见的知识点，如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求，很常见的需求也不复杂，主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法，方便查阅使用，如有问题请指正。
VUE element-ui 之button按钮之间切换时单个按钮持续聚焦状态实现（点击按钮聚焦，仅当点击其他按钮时，之前的按钮会失焦，当前按钮聚焦）
