clipboard.js的引入和使用

在平時(shí)的開發(fā)過程中難免會需要實(shí)現(xiàn) 點(diǎn)擊復(fù)制文本的功能，我們一般是通過clipboard.js去實(shí)現(xiàn)

1.引入clipboard.js

• 通過npm安裝：npm install clipboard --save
• 通過通過引入源文件：下載地址

<script src="js/clipboard.min.js"></script>

2.在需要使用的組件里import

import Clipboard from 'clipboard'

3.使用和方法

<span class="tag-read" data-clipboard-text="我是點(diǎn)擊復(fù)制的內(nèi)容" @click="copy">我是點(diǎn)擊復(fù)制的內(nèi)容</span>

copy () {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {
          console.log('復(fù)制成功')
          //  釋放內(nèi)存
        clipboard.destroy()
      })
        clipboard.on('error', e =>{
        // 不支持復(fù)制
        console.log('該瀏覽器不支持復(fù)制')
        // 釋放內(nèi)存
        clipboard.destroy()
      })
    },

通過點(diǎn)擊文本就會將其復(fù)制

image.png