vue中使用clipboard實現文本復制功能

1、安裝clipboard.js依賴

地址：https://github.com/zenorocha/clipboard.js

yarn add clipboard  或 npm install clipboard --save

2、封裝一個文本復制的組件

先在組件文件夾下，如utils目錄下新建 clipboard.js 文件

寫入以下代碼：
import Clipboard from 'clipboard';

function clipboardSuccess() {
    console.log("復制成功")
    //你可以在這里設置你的提示
}
function clipboardError() {
    console.log("復制失敗")
}

export default function handleCopy(text, event, onSuccess, onError) {
    event = event || {};
    const clipboard = new Clipboard(event.target, {
        text: () => text,
    });
    clipboard.on('success', () => {
        onSuccess ? onSuccess() : clipboardSuccess();
        clipboard.off('error');
        clipboard.off('success');
        clipboard.destroy();
    });
    clipboard.on('error', () => {
        onError ? onError() : clipboardError();
        clipboard.off('error');
        clipboard.off('success');
        clipboard.destroy();
    });
    clipboard.onClick(event);
}

3、引用及使用組件

<div @click="copyValue('嘻嘻', $event)">點我</div>


import handleCopy from '@/utils/clipboard'

methods:{
    copyValue(text, e){
        let value=text  //這里設置你要復制的文本信息，可以是text，也可以從e中獲取，也可以自定義
        handleCopy(value, e, ()=>{
            console.log("這是復制成功回調函數")
            alert("復制成功！")
        },()=>{
            console.log("這是復制失敗回調函數")
        })
    }
}