最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Copy data(text) to Clipboard in Vue(Nuxt js) - Stack Overflow

programmeradmin3浏览0评论

When I click the vs-button, the single_download_link.pdfId should be copied on clipboard. I tried like this. But it was not working. And I will not use v-clipboard node module. Please help me. Regards.

DOM code:

<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',
        ponents:{
            Vinput,
        },
        data () {
            return {
                single_download_link:{
                    pdfId:"",
                    pdfRandomName:"",
                    uploaderUserName:"",
                    uploaderUserId:"",
                    uploaderUserEmail:""
                }
            }
        },
        methods:{
            copy(){
                this.$refs.text.select();
                document.execCommand('copy');
            },
        },

    }
</script>

When I click the vs-button, the single_download_link.pdfId should be copied on clipboard. I tried like this. But it was not working. And I will not use v-clipboard node module. Please help me. Regards.

DOM code:

<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',
        ponents:{
            Vinput,
        },
        data () {
            return {
                single_download_link:{
                    pdfId:"",
                    pdfRandomName:"",
                    uploaderUserName:"",
                    uploaderUserId:"",
                    uploaderUserEmail:""
                }
            }
        },
        methods:{
            copy(){
                this.$refs.text.select();
                document.execCommand('copy');
            },
        },

    }
</script>
Share Improve this question edited Jun 8, 2021 at 14:35 ParisaN 2,0923 gold badges26 silver badges59 bronze badges asked Jun 8, 2021 at 7:04 topwebdevtopwebdev 232 silver badges6 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

Update 2021:

document.execCommand() is marked as depreciated

Alternative.

Simply

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

Previous answer:

This worked for me, just put it into your methods and pass any String you wanted to copy.

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()
        },
发布评论

评论列表(0)

  1. 暂无评论