最近写项目遇到了一个新需求,完成一键复制功能,这个功能在项目中说是很常见了。但是也卡了很长时间竟然。下面记录一下整个流程卡的地方
1. 首先在项目中导入clipboard
npm install clipboard --save
2. 首先在项目中导入clipboard
import Clipboard from 'clipboard'
写好按钮 并加上点击事件
下面 this.$refs.clipboard_pc 对应上面要点击按钮的 ref=“clipboard_pc”
tip: 注意对应的是 要点击按钮
我就是对应的是给展示的数据的那个模块加的,浪费了好长时间
//复制pc链接
copyPC() {
let clipboard = new Clipboard(this.$refs.clipboard_pc);//这里是所对应的点击按钮
clipboard.on("success", (e) => {
this.$message({
message: "复制成功",
type: "success",
});
// 释放内存
clipboard.destroy();
});
clipboard.on("error", (e) => {
// 不支持复制
console.log(this, "该浏览器不支持复制!", "warning");
// 释放内存
clipboard.destroy();
});
},
//复制h5链接
copyh5() {
let clipboard = new Clipboard(this.$refs.clipboard_h5);
clipboard.on("success", (e) => {
this.$message({
message: "复制成功",
type: "success",
});
// 释放内存
clipboard.destroy();
});
clipboard.on("error", (e) => {
// 不支持复制
console.log(this, "该浏览器不支持复制!", "warning");
// 释放内存
clipboard.destroy();
});
},
我这里是两个复制的需求
所以就写了两份代码,复制了一份