一、复制单行文本
1. navigator.clipboard.writeText
<template>
<div>
<el-button type="primary" @click="btn1">复制</el-button>
<div style="margin-top: 50px">{{ msg1 }}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg1: "msg1msg1msg1msg1", //复制的内容
};
},
methods: {
// 方法一
btn1() {
// navigator.clipboard.writeText 该方法需要在安全域下才能够使用,比如:https 协议的地址、127.0.0.1、localhost
navigator.clipboard
.writeText(this.msg1)
.then(() => {
this.$message.success("复制成功");
})
.catch((err) => {
// 复制失败
console.error("复制失败");
});
},
},
};
</script>
2.execCommand方法
<template>
<div>
<el-button type="primary" @click="btn2">复制</el-button>
<div style="margin-top: 50px">{{ msg2 }}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg2: "msg2msg2msg2msg2", //复制的内容
};
},
methods: {
btn2() {
let input = document.createElement("input");
document.body.appendChild(input);
input.value = this.msg2; // 此处为需要复制的文本变量
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("当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作");
}
},
},
};
</script>
3. 使用vue-clipboard2库
1.安装npm install --save vue-clipboard2
2.main.js 中引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
3.页面使用
<template>
<div>
<el-button
type="primary"
v-clipboard:copy="msg3"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>复制</el-button
>
<div style="margin-top: 50px">{{ msg3 }}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg3: "msg3msg3msg3msg3", //复制的内容
};
},
methods: {
onError() {
console.error("复制失败");
},
// 复制
onCopy() {
this.$message.success("复制成功");
},
},
};
</script>
4. 使用clipboard.js库
1.npm install clipboard --save
2.当前文件引入 import ClipboardJS from "clipboard"
;
<template>
<div>
<!-- 也可通过设置data-clipboard-text属性指定要复制的内容 -->
<!-- <button class="btn4" data-clipboard-text="要复制的内容">复制</button> -->
<el-button type="primary" class="btn4">复制</el-button>
<div style="margin-top: 50px">{{ msg4 }}</div>
</div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
data() {
return {
msg4: "msg4msg4msg4msg4", //复制的内容
};
},
mounted() {
let that = this;
const clipboard = new Clipboard(".btn4", {
text: function () {
return that.msg4;
},
});
clipboard.on("success", function (e) {
console.log("复制成功");
});
clipboard.on("error", function (e) {
console.log("复制失败");
});
}
};
</script>
二、复制多行文本
1. 使用input/textarea
创建input的textarea
,把需要复制的内容用\n
连接
<template>
<div class=''>
<div>
<p>msg1:{{ msg1 }}</p>
<p>msg2:{{ msg2 }}</p>
<p>msg3:{{ msg3 }}</p>
<p>msg4:{{ msg4 }}</p>
<el-button type="text" @click="copy1">复制</el-button>
</div>
</div>
</template>
<script>
export default {
name:'',
components: {},
props:[],
data() {
return {
msg1:'msg1msg1msg1msg1',
msg2:'msg2msg2msg2msg2',
msg3:'msg3msg3msg3msg3',
msg4:'msg4msg4msg4msg4',
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
copy1(){
let that = this
let txa = document.createElement('textarea')
let txval = 'msg1:' + that.msg1 + '\n' + 'msg2:' + that.msg2 + '\n' + 'msg3:' + that.msg3 + '\n' + 'msg4:' + that.msg4
txa.value = txval
document.body.appendChild(txa)
txa.focus();
txa.select()
try {
let result = document.execCommand("copy");
document.body.removeChild(txa);
if (!result) {
console.error("复制失败");
} else {
this.$message.success("复制成功");
}
} catch (e) {
document.body.removeChild(txa);
alert("当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作");
}
}
}
};
</script>
<style lang='scss' scoped>
</style>
2. 使用clipboard.js库
1.npm install clipboard --save
2.当前文件引入 import ClipboardJS from "clipboard"
;
3.通过设置data-clipboard-target
属性指定了要复制的目标元素
<template>
<div class=''>
<div id="content">
<p>msg1:{{ msg1 }}</p>
<p>msg2:{{ msg2 }}</p>
<p>msg3:{{ msg3 }}</p>
<p>msg4:{{ msg4 }}</p>
</div>
<!-- 通过设置data-clipboard-target属性指定了要复制的目标元素 -->
<el-button type="text" class="copy-btn" data-clipboard-target="#content">复制</el-button>
</div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
name:'',
components: {},
props:[],
data() {
return {
msg1:'msg1msg1msg1msg1',
msg2:'msg2msg2msg2msg2',
msg3:'msg3msg3msg3msg3',
msg4:'msg4msg4msg4msg4',
};
},
computed: {},
watch: {},
created() {},
mounted() {
const clipboard = new Clipboard('.copy-btn'); // .copy-btn为按钮元素的class名称或选择器
clipboard.on('success', (e) => {
console.log('已复制到剪贴板!');
e.clearSelection(); // 清除选中状态
});
clipboard.on('error', () => {
console.warn('无法复制到剪贴板!');
});
},
methods: {}
};
</script>
<style lang='scss' scoped>
</style>