點擊復制功能主要通過? clipboard.js? 來實現(xiàn)

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

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、添加需要復制的內(nèi)容

? ? ?例如：<button class="tag-read" data-clipboard-text="我是可以復制的內(nèi)容，請點擊復制" @click="copy">立即閱讀</button>

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

4、添加點擊后的方法

? ? ??copy() {

? ? ? ? var clipboard = new Clipboard('.tag-read')

? ? ? ? clipboard.on('success', e => {

? ? ? ? ? console.log('復制成功')

? ? ? ? ? // 釋放內(nèi)存

? ? ? ? ? clipboard.destroy()

? ? ? ? })

? ? ? ? clipboard.on('error', e => {

? ? ? ? ? // 不支持復制

? ? ? ? ? console.log('該瀏覽器不支持自動復制')

? ? ? ? ? // 釋放內(nèi)存

? ? ? ? ? clipboard.destroy()

? ? ? ? })

? ? ? }

原文鏈接：https://blog.csdn.net/qq_38543537/article/details/81663127