Копирование данных(текста) в буфер обмена в Vue(Nuxt js)

#javascript #laravel #vue.js #nuxt.js

Вопрос:

Когда я нажимаю кнопку 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>
 

Ответ №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()
        },