vue使用clipboard实现复制功能

最新推荐文章于 2024-07-25 17:11:44 发布

乁*

最新推荐文章于 2024-07-25 17:11:44 发布

阅读量543

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_57228868/article/details/125761699

版权

1、安装

npm install clipboard --save

2、引用

import Clipboard from 'clipboard';

3、复制固定内容

<button id="copy-btn" data-clipboard-text="复制的内容" @click="copy">立即阅读</button>


copy() {
     let clipboard = new Clipboard("#copy-btn");
     let that = this;
     clipboard.on("success", function (e) {
           that.$message.success("复制成功");
     });
     clipboard.on("error", function (e) {
           that.$message.error("复制失败");
     });
})

4、复制动态内容

<span id="copy-span">这是复制的内容</span>

<button id="copy-btn" data-clipboard-action="copy" data-clipboard-target="#copy-span" @click="copy">复制</button>


copy() {
     let clipboard = new Clipboard("#copy-btn");
     let that = this;
     clipboard.on("success", function (e) {
           that.$message.success("复制成功");
     });
     clipboard.on("error", function (e) {
           that.$message.error("复制失败");
     });
})