vue中使用clipboard.js復制分本

依賴clipboard.js二次開發vue插件CopyText

首先

npm install clipboard --save-dev

在項目中創建plugin文件夾和CopyText.js

 

 

 CopyText.js

//拷貝插件 kay
// import iView from 'iview';
import Clipboard from 'clipboard';
let CopyText = new Object();
CopyText.install = function (Vue, options) {
    console.log(Vue, '拷貝')
    // 4. 添加實例方法
    // text,    要copy的文本
    // success, 成功回調函數
    // error    失敗回調函數
    Vue.prototype.$CopyText = function (text, success, error) {
        // 邏輯...
        let oCopyBtn = document.createElement('button');
        oCopyBtn.setAttribute('id', 'copy-btn');
        oCopyBtn.setAttribute('data-clipboard-text', text);
        document.body.appendChild(oCopyBtn);
        var clipboard = new Clipboard('#copy-btn');
        clipboard.on('success', e => {
            success(e);
            // console.log('復制成功');
            // iView.Message.success(`復制成功！`);
            // 釋放內存
            clipboard.destroy();
            //移除節點
            document.body.removeChild(oCopyBtn);
        });
        clipboard.on('error', e => {
            error(e);
            // 不支持復制
            //console.log('該瀏覽器不支持自動復制')
            // iView.Message.error(`復制失敗！`);
            // 釋放內存
            clipboard.destroy();
            //移除節點
            document.body.removeChild(oCopyBtn);
        });
        //模擬點擊
        oCopyBtn.click();
    }
};

export default CopyText;

在main.js中使用插件

import CopyText from './plugin/CopyText';
//...你的其它代碼
Vue.use(CopyText);

使用方法

在其他.vue文件中

      //復制 點擊某個按鈕 執行 this.$CopyText函數即可
     //示例代碼
     handleCopy(params){
        this.$CopyText(要拷貝的文本, (e)=>{
               //something to do 
            //this.$Message.success('復制成功！') //例：iview ui框架的提示
        }, (e)=>{
                //something to do 
        //this.$Message.error('復制失敗！')
        });
      },  

希望可以幫到你！