vue 实现点击复制文本到剪贴板 共四种方法
1. navigator.clipboard.writeText该方法需要在安全域下才能够使用,比如:https 协议的地址、127.0.0.1、localhost
export default {
data() {
return {
message: "床前明月光",
};
},
methods: {
// 方法一
btn1() {
// navigator.clipboard.writeText 该方法需要在安全域下才能够使用,比如:https 协议的地址、127.0.0.1、localhost
navigator.clipboard
.writeText(this.message)
.then(() => {
this.$message.success("复制成功");
})
.catch((err) => {
// 复制失败
console.error("复制失败");
});
},
},
};
2. execCommand方法即将被废弃
export default {
data() {
return {
message1: "疑是地上霜",
};
},
methods: {
// 方法二 execCommand方法即将被废弃
btn2() {
let input = document.createElement("input");
document.body.appendChild(input);
input.value = this.message1; // 此处为需要复制的文本变量
input.focus();
input.select();
try {
let result = document.execCommand("copy");
document.body.removeChild(input);
if (!result) {
console.error("复制失败");
} else {
this.$message.success("复制成功");
}
} catch (e) {
document.body.removeChild(input);
alert("当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作");
}
},
},
};
3. 使用vue-clipboard2库
安装 npm install --save vue-clipboard2main.js 中引入
type="primary" v-clipboard:copy="message2" v-clipboard:success="onCopy" v-clipboard:error="onError" >复制方法三
>
export default {
data() {
return {
message2: "举头望明月",
};
},
methods: {
// 方法三
// 使用vue-clipboard2库
// 安装 npm install --save vue-clipboard2
// 在main.js中引入
// import VueClipboard from 'vue-clipboard2';
// Vue.use(VueClipboard);
onError() {
console.error("复制失败");
},
// 复制
onCopy() {
this.$message.success("复制成功");
},
},
};
4. 使用clipboard.js库
npm install clipboard --save当前文件引入 import ClipboardJS from "clipboard";
import ClipboardJS from "clipboard";
export default {
data() {
return {
message3: "低头思故乡",
};
},
mounted() {
// 方法四
// cnpm install clipboard --save
// 当前文件引入 import ClipboardJS from "clipboard";
let that = this;
const clipboard = new ClipboardJS(".btn", {
text: function () {
return that.message3;
},
});
clipboard.on("success", function (e) {
console.log("复制成功");
});
clipboard.on("error", function (e) {
console.log("复制失败");
});
}
};
推荐使用第一种或者第三种,请根据自身需求选择适当的方法!
精彩文章
发表评论