VUE 實現復制功能

1、下載clipboard.js

npm install clipboard --save

 

2、在需要使用的組件中引入

import Clipboard from 'clipboard';

 

3、添加需要復制的內容與按鈕

<span>我是需要復制的內容</span> <!-- 這個只是展示 -->
<button class="tag-read" data-clipboard-text="我是需要復制的內容" @click="copy">點擊復制</button>

 

4、JS 中

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