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('复制失败！')
        });
      },  

希望可以帮到你！