【问题标题】：Copy data(text) to Clipboard in Vue(Nuxt js)在Vue（Nuxt js）中将数据（文本）复制到剪贴板
【发布时间】：2021-08-25 04:50:19
【问题描述】：

当我点击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>

【问题讨论】：

标签： javascript laravel vue.js nuxt.js

【解决方案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()
        },

【讨论】：