1.下载
npm i vue-clipboard2 -s
2.main.js中加入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
3.在代码中引入
按钮
<!--分享按钮-->
<div style="margin-right: 10px;">
<div style="height: 40px;width: 40px;">
<el-button class="button-share" type="text" style="height: 100%;width: 100%;display: flex;flex-direction: column;padding: 0 0 0 0;justify-content: flex-end;align-items: center;color: darkgrey;"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">
<div style="font-size: 13px;">分享</div>
</el-button>
</div>
</div>
数据区
message: '复制的内容'
方法区
onCopy: function (e) {
this.$message.success("已复制网址");
},
onError: function (e) {
this.$message.error("复制失败");
}
样式
.button-share:hover {
background-color: #f1f2f3;
color: black;
}