vue通过clipboard插件实现复制到剪切板功能

1、在package.json添加依赖

"dependencies": {
  "clipboard": "^2.0.0"
  }

2、页面引入clipboard

import Clipboard from 'clipboard';

3、给触发复制事件的按钮增加class，增加点击事件

H函数实现：

h('Button', {
  props: {
    type: 'info',
    size: 'small',
    icon: 'ios-link'
  },
  class: ['link-copy'],
  on: {
    click: () => {
      this.copyLink(params.row)
    }
  }
}, '')

页面实现：

<Button class="link-copy" @click="copyLink(row)">新建</Button>

4、method中写入点击事件

copyLink (row) {
  // 复制访问链接
  const clipboard = new Clipboard('.link-copy', {
    // 点击copy按钮，直接通过text直接返回复印的内容
    text: () => row.webSiteVisitUrl,// 该文本则为需要复制的内容
  });
  // 通过传递DOM选择器，HTML元素或HTML元素列表实例化
  clipboard.on('success', (e) => {
    this.$Message.success('拷贝到剪切板成功！');
    e.clearSelection();
    // 释放内存
    clipboard.destroy();
  });
  clipboard.on('error', (e) => {
    // 不支持复制
    this.$Message.error({
      content: `该浏览器不支持自动复制，请手动复制链接：${e.text}`,
        duration: 30,
        closable: true
    });
    // 释放内存
    clipboard.destroy();
  });
}


本文为胖虎原创文章,转载无需和我联系,但请注明来自胖虎博客panghucat.cn