vue获取剪切板内容_vue通过clipboard插件实现复制到剪切板功能

1、在package.json添加依赖"dependencies": {

"clipboard": "^2.0.0"

}

2、页面引入clipboardimport 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)

}

}

}, '')

页面实现：新建

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