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

/* 需求：实现一键复制文本内容，用于鼠标右键粘贴。

思路：1、动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域

2、将要复制的值赋给 textarea 标签的 value 属性，并插入到 body

3、选中值 textarea 并复制

4、将 body 中插入的 textarea 移除

5、在第一次调用时绑定事件，在解绑时移除事件

使用：给 Dom 加上 v-copy 及复制的文本即可 例子：<button v-copy="copyText">一键复制</button> */

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)
    })

/*  需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。

思路：

1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮

2、将需要触发的方法绑定在指令上

使用：给 Dom 加上 v-debounce 及回调函数即可

<button v-debounce="debounceClick">防抖提交</button>

*/

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)