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