vue 常用自定义指令(v-copy，v-debounce)

Vue.directive('copy', {
    bind: function (el, binding, vnode) {
    el.$value = binding.value;
    el.handler = function () {
        if (!el.$value) {
            console.log("无复制内容")
            return
        }
        console.log(el.$value)
        // 动态创建 textarea 标签
        const textarea = document.createElement('textarea')
        // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
        textarea.readOnly = 'readonly'
        textarea.style.position = 'absolute'
        textarea.style.left = '-9999px'
        // 将要 copy 的值赋给 textarea 标签的 value 属性
        textarea.value = el.$value
        // 将 textarea 插入到 body 中
        document.body.appendChild(textarea)
        // 选中值并复制
        textarea.select()
        const result = document.execCommand('Copy')
        if (result) {
            console.log('复制成功') // 可根据项目UI仔细设计
        }
        document.body.removeChild(textarea);
        }
        // 绑定点击事件，就是所谓的一键 copy 啦
            el.addEventListener('click', el.handler)
        },
        //
        componentUpdated: function (el, value) {
            el.$value = value.value
            console.log(el.$value)
        },
        // 指令与元素解绑的时候，移除事件绑定
        unbind(el) {
            el.removeEventListener('click', el.handler)
        },
    })

Vue.directive('debounce', {
    bind: function (el, value) {
        // 添加点击事件
        el.addEventListener('click', function () {
            // 如果存在$timer，清除后从新点击
            if (el.$timer) {
                clearTimeout(el.$timer);
            }
            if (!el.disabled) {
                el.disabled = true
                value.value();
                el.$timer = setTimeout(() => {
                    el.disabled = false
                }, 1000)
            }
       })
    }
})