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();

});

}, 　　

}