vue如何實現粘貼復制功能

這篇文章主要介紹了vue如何實現粘貼復制功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

引言

項目中如果實現粘貼復制功能，目前市面上共有三種方法，均有利有弊，大家可以根據自己項目實際情況依次選擇。本節將都會對這三種方法做詳細闡述，重點推薦第三種方法。

1. 項目需求圖展示：

1. 安裝第三方插件方法（不推薦）

這種方法兼容性很好，如果項目只使用了一次，不建議使用。

安裝插件

npm install clipboard --save

引入插件

import Clipboard from 'clipboard';

項目中使用

<template>
    <span class="copy" @click="onCopy">
        <i class="iconfont iconcopy"></i>
        <span>點擊復制</span>
    </span>
</template>

<script>
    methods: {
        onCopy(){
             let clipboard = new Clipboard('.copy')
             clipboard.on('success', e => {
               console.log('復制成功')
               // 釋放內存
               clipboard.destroy()
             })
             clipboard.on('error', e => {
               // 不支持復制
               console.log('該瀏覽器不支持自動復制')
               // 釋放內存
               clipboard.destroy()
             })
           }
    }
</script>

2. 瀏覽器自帶Document.execCommand()復制方法（不推薦）

雖然這個方法不需要安裝插件，但是官網申明如下：

項目中使用

<script>
    methods: {
        onCopy(){
            //創建一個input框
            const input = document.createElement("input")
            //將指定的DOM節點添加到body的末尾
            document.body.appendChild(input)
            //設置input框的value值為直播地址
            input.setAttribute("value", e)
            //選取文本域中的內容
            input.select()
            //copy的意思是拷貝當前選中內容到剪貼板
            //document.execCommand（）方法操縱可編輯內容區域的元素
            //返回值為一個Boolean，如果是 false 則表示操作不被支持或未被啟用
            if (document.execCommand("copy")) {
            document.execCommand("copy")
            }
            //刪除這個節點
            document.body.removeChild(input)
    }
</script>

3. Clipboard.writeText方法（強烈推薦）

說明

Clipboard 接口的 writeText()  方法可以寫入特定字符串到操作系統的剪切板。會返回一個Promise ，一旦剪貼板的內容被更新，它就會被解析。如果調用者沒有寫入剪貼板的權限，則拒絕寫入剪切板（reject）

項目中使用

onCopy() {
    navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
        this.$message.success('復制成功')
    })
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue如何實現粘貼復制功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!