vue指令 - clipboard-文字复制篇

在我们项目开发中常常会有这样的需求 - 实现复制功能，用传统的方式不仅代码繁琐还不方便，为此利用vue指令的方式来实现，用起来简单方便

安装

• clipboard

npm install clipboard --save 
或
cnpm i clipboard -S

功能实现

// 引用
import Clipboard from 'clipboard';

• 说明
  • data-clipboard-text - 要复制内容的属性
  • data-clipboard-action
    • cut - 内容被剪贴（只能在input和textarea中起作用）
    • copy - 内容被复制(默认值)
  • data-clipboard-target - 指向复印节点，这里指input的目标id (也可以是元素节点)
  • 创建函数时可指定内容或要复制的节点目标

    var clipboard = new Clipboard('.btn', {
         // 通过target指定要复印的节点
         target: function() {
              return document.querySelector('div');
         },
         // 点击copy按钮，直接通过text直接返回复印的内容
         text: function() {
             return 'to be or not to be';
         }
    });
    

• 非指令方式 - 静态

立即阅读

copy() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          console.log('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          console.log('该浏览器不支持自动复制')
          // 释放内存
          clipboard.destroy()
        })
      }

• 非指令方式 - 动态

复制

let clipboard = new Clipboard(this.$refs.copy);
clipboard.on('success', function () {
    Toast('复制成功')
})
clipboard.on('error', function () {
    Toast('复制失败，请手动复制')
 })

• 指令方式 - 动态

import Clipboard from 'clipboard';
Vue.directive('clipboard', {
        bind(el, bingind, vnode) {
                const clip = new Clipboard(el);
                el.dataset.clipboardText = bingind.value;
                clip.on('success', e => {
                    console.info('Action:', e.action);
                    console.info('Text:', e.text);
                    console.info('Trigger:', e.trigger);
                });
                clip.on('error', e => {
                    console.error('Action:', e.action);
                    console.error('Trigger:', e.trigger);
                });
            },
            update(el, bingind) {
                el.dataset.clipboardText = bingind.value;
                console.log('bingind');
                console.log(bingind);
            }
});

// 页面使用
大家好

• 指令方式 - 动态 - 扩展篇
• bingind.arg - 核心部分 - 可接收不同的参数

import Clipboard from 'clipboard';
Vue.directive('clipboard', {
            bind(el, bingind, vnode) {
                switch (bingind.arg) {
                    case 'success':
                        el._vClipBoard_success = bingind.value;
                        break;
                    case 'error':
                        el._vClipBoard_error = bingind.value;
                        break;
                    default: {
                        const clip = new Clipboard(el, {
                            text: () => bingind.value,
                            action: () => bingind.arg === 'cut' ? 'cut' : 'copy'
                        });
                        // el.dataset.clipboardText = bingind.value;
                        clip.on('success', e => {
                            /* {action,text,trigger} = e */
                            const callback = el._vClipBoard_success;
                            callback && callback(e);
                        });
                        clip.on('error', e => {
                            const callback = el._vClipBoard_error;
                            callback && callback(e);
                        });
                        el._vClipBoard = clip;
                    }
                }
            },
            update(el, bingind) {
                // el.dataset.clipboardText = bingind.value;
                if (bingind.arg === 'success') {
                    el._vClipBoard_success = bingind.value;
                } else if (bingind.arg === 'error') {
                    el._vClipBoard_error = bingind.value;
                } else {
                    el._vClipBoard.text = function () {
                        return bingind.value;
                    };
                    el._vClipBoard.action = () => bingind.arg === 'cut' ? 'cut' : 'copy';
                }
            },
            unbind(el, bingind) {
                if (bingind.arg === 'success') {
                    delete el._vClipBoard_success;
                } else if (bingind.arg === 'error') {
                    delete el._vClipBoard_error;
                } else {
                    el._vClipBoard.destroy();
                    delete el._vClipBoard;
                }
            }
        });

页面使用

• v-clipboard:copy - copy 要复制的内容 cut 要剪贴的内容
• v-clipboard:success 复制或剪贴成功的回调函数
• v-clipboard:error 复制或剪贴失败的回调函数

clipboard