點(diǎn)擊復(fù)制功能主要通過(guò) clipboard.js 來(lái)實(shí)現(xiàn)

在vue中使用clipboard.js 時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題，就是如果不是input或者button 按鈕的話，則復(fù)制不成功，使用步驟如下：

1、引入clipboard.js，方法如下：

第一種直接npm安裝：npm install clipboard --save

第二種：<script src="js/clipboard.min.js"></script>（下載地址：https://clipboardjs.com/）

2、在需要使用的組件中import

引用方法：import Clipboard from 'clipboard';

3、添加需要復(fù)制的內(nèi)容

例如：<button id="copycode" data-clipboard-text="我是可以復(fù)制的內(nèi)容，請(qǐng)點(diǎn)擊復(fù)制" @click="copy">立即閱讀</button>

解析： data-clipboard-text 后邊跟需要復(fù)制的內(nèi)容

4、添加點(diǎn)擊后的方法

 var clipboard = new Clipboard("#copycode");
      clipboard.on("success", (e) => {
        console.log("復(fù)制成功");
        // 釋放內(nèi)存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持復(fù)制
        console.log("該瀏覽器不支持自動(dòng)復(fù)制");
        // 釋放內(nèi)存
        clipboard.destroy();
      });
    },