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

• 非指令方式 - 静态

<button class="tag-read" data-clipboard-text="我是可以复制的内容，啦啦啦啦" @click="copy">立即阅读</button>

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

• 非指令方式 - 动态

<input type="text" v-model="copyContent"  id="copy_text" style="opacity: 0">
<button ref="copy"  data-clipboard-action="copy"
data-clipboard-target="#copy_text" @click="copy">复制</button>

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

// 页面使用
<div v-clipboard="要复制的值或变量">大家好</div>