将数据(文本)复制到Vue(Nuxt-js)中的剪贴板

Question

当我单击vs-button时，single_download_link.pdfId应该被复制到剪贴板上。我试过了。但它不起作用。并且我不会使用v-clipboard节点模块。请帮帮我。问候。

DOM代码:

<div ref="text" class="w-full">{{single_download_link.pdfId}}
</div>
<vs-button block @click="copy()">
Copy this link to clipboard.
</vs-button>
//this is my function
<script>
import "../../assets/css/products.css";

export default {
name: 'Products',
components:{
Vinput,
},
data () {
return {
single_download_link:{
pdfId:"",
pdfRandomName:"",
uploaderUserName:"",
uploaderUserId:"",
uploaderUserEmail:""
}
}
},
methods:{
copy(){
this.$refs.text.select();
document.execCommand('copy');
},
},
}
</script>

Answer 1

更新2021：

document.execCommand((标记为折旧

可选。

简单

copyToClipBoard(textToCopy){
navigator.clipboard.writeText(textToCopy);      
},

上一个答案：

这对我很有效，只需将其放入您的方法中，然后传递您想要复制的任何String。

copyToClipBoard(textToCopy){
const tmpTextField = document.createElement("textarea")
tmpTextField.textContent = textToCopy
tmpTextField.setAttribute("style","position:absolute; right:200%;")
document.body.appendChild(tmpTextField)
tmpTextField.select()
tmpTextField.setSelectionRange(0, 99999) /*For mobile devices*/
document.execCommand("copy")
tmpTextField.remove()
},