vue 点击复制文本

1.下载clipboard.js   

npm install clipboard --save 

2.引入，可以在mian.js中全局引入也可以在单个vue中引入

单页面引用：
import Clipboard from "clipboard";

main.js中全局引入：

import Clipboard from 'clipboard'; 

Vue.prototype.Clipboard=Clipboard;

3.使用，:data-clipboard-text中即为你要复制的内容

<div class="item">

   <span>收货地址：</span>

   {{orderInfo.address.provinceName ||''}}{{orderInfo.address.districtName||'' }}{{orderInfo.address.address }}

    <el-button

    type="text"

    class="btn"

    :data-clipboard-text="orderInfo.address.address"

    @click="copy"

    >【复制】</el-button>

</div>

4、在methods中调用copy事件

methods: {

    copy: function() {

      var _this = this;

      var clipboard = new Clipboard(".btn"); //单页面引用

　　　var clipboard = new this.Clipboard(".btn"); //在main.js中引用

      clipboard.on("success", e => {

        // 释放内存

        clipboard.destroy();

      });

      clipboard.on("error", e => {

        // 不支持复制

        Message({

          message: "该浏览器不支持自动复制",

          type: "warning"

        });

        // 释放内存

        clipboard.destroy();

      });

    },  　　

}