复制功能的实现方式
一、vue-clipboard
npm install vue-clipboard2 --save
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
使用:
<template>
<div class="container">
<input type="text" v-model="content" />
<button
v-clipboard:copy="content"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>
点击复制
</button>
</div>
</template>
<script>
export default {
data() {
return {
content: "",
};
},
methods: {
onCopy: function(e) {
console.log("复制成功,复制的内容为:", e.text);
},
onError: function(e) {
console.log("复制失败");
},
},
};
</script>
二、navigation.clipboard
navigator.clipboard.writeText() 将指定字符串写入剪切板中,返回一个promise对象
往输入框内输入内容后点击复制,就可以复制了
<input type="text" id="ipt" />
<input type="button" id="btn" value="点击复制" />
<script>
document.querySelector("#btn").addEventListener("click", function() {
navigator.clipboard
.writeText(document.querySelector("#ipt").value)
.then(() => {
alert("复制成功");
})
.catch(() => {
alert("复制失败");
});
});
问题:本地没问题,但是当嵌入到iframe中,复制直接报错了;
cannot read properties of undefined (reading writeText)
只有在用户事先授予网站或应用对剪切板的访问许可之后,才能使用异步剪切板读写方法
解决方法:给iframe添加allow属性
<iframe allow="clipboard-write" src="http://127.0.0.1:5500/src/views/copy.html" />
三、execCommand
如果是input的话可以用,普通的元素不能用,而且select会选中内容,有选中的效果
<input type="text" v-model="content" ref="ipt" />
copyContent() {
this.$refs.ipt.select();
document.execCommand("copy");
}
这种方法不建议使用,已过时