记录封装之路（一）

1. 封装自定义指令

目的：封装一个全局的自定义指令，使其按钮可以使用。
功能：控制用户双击按钮，实现延迟禁用的效果。
思路：

1. 创建一个全局可以使用的指令，首先需要在utils文件中，创建一个directive.js文件
2. 运用vue的自定义指令语法，在其内容中设置定时器
3. 当用户点击后，将其按钮禁用。
4. 定时器时间结束之后，按钮启用。

实现代码:

export default {
    install(Vue) {
        Vue.directive('doubleClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false    
                        }, binding.value || 2000)
                    }
                })
            }
        })
    }
}