To provide users with the most convenient and efficient experience, thus, to provide colleagues with clear and convenient operation steps in the source code;
Not much nonsense --- the last step:
Step 1: Experts know it: download the plug-in first
npm install --save vue-clipboard2
Step 2: Import and mount in man in the project
The third step: go to the page we need to use:
<template>
<div class="container">
<div id="target">
{
{ list }}
</div>
<button type="button" @click="copy">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list: "赵同同",
};
},
methods: {
copy() {
// let text=document.getElementById('target').innerText; //获取div中的数据进行复制
let text = this.list; //拿到data中的list数据进行复制
this.$copyText(text).then(
(e) => {
console.log(e);
this.$message({
showClose: true,
message: "恭喜你, 获取成功",
type: "success",
});
},
(e) => {
console.log(e);
this.$message({
showClose: true,
message: "错了哦，获取失败",
type: "error",
});
}
);
},
},
};
</script>
Natively rely on browser replication for implementation:
Insufficient: The compatibility is not very good, some browsers do not support it --- it is recommended to use the above plug-in form for implementation.
<template>
<div class="container">
<div id="target">
{
{ list }}
</div>
<button type="button" @click="copyText">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list: "赵同同",
};
},
methods: {
copyText() {
// let text=document.getElementById('target').innerText; //获取div中的数据进行复制
let text=this.list; //拿到data中的list数据
let inputElement = document.createElement("input"); //模拟输入框
inputElement.value = text; //将需要获取得值赋给我们模拟得输入框
document.body.appendChild(inputElement); //appendChild追加
inputElement.select(); //选中文本
document.execCommand("copy"); //执行浏览器得复制命令copy
inputElement.remove(); //清楚模拟的输入框 / 由此释放内存
this.$message({ //提示
showClose: true,
message: "恭喜你, 复制成功",
type: "success",
});
},
},
};
</script>
The final effect is provided:
