依赖vue-qr，clipboard
导入依赖npm install clipboard --save
npm install vue-qr --save
<template> <div class="vue-qr"> <div style="font-size:20px">微信扫一扫</div> <div> <vue-qr :logoSrc="config.logo" :text="config.value" :size="300" :margin="0" ref="Qrcode" class="vue-qr-img" ></vue-qr> </div> <div> <a :href="config.value">{{config.value}}</a> </div> <div> <el-button class="tag-copy" :data-clipboard-text="config.value" @click="copyShareLink">复制链接</el-button> <a :herf="exportLink" type="primary" @click="downloadImg" :download="downloadFilename">下载二维码</a> </div> </div> </template> <script> import VueQr from "vue-qr"; //生成二维码 import Clipboard from "clipboard"; //复制 export default { name: "MyShare", components: { VueQr, }, data() { return { config: { //二维码参数 value: "https://element.eleme.cn/#/zh-CN/component/layout", //显示的值、跳转的地址 logo: require("../../../assets/image/profile.jpg"), //中间logo的地址 size: "100", }, exportLink: "", downloadFilename: "", }; }, methods: { // 复制链接 async copyShareLink() { let clipboard = new Clipboard(".tag-copy"); await clipboard.on("success", (e) => { showNotification("success", "链接复制成功,请到微信打开！"); clipboard.destroy(); // 释放内存 }); clipboard.on("error", (e) => { showNotification("warning", "该浏览器不支持自动复制！"); // 不支持复制 clipboard.destroy(); // 释放内存 }); }, // 下载二维码图片 downloadImg() { var a = document.createElement("a"); let Qrcode = this.$refs.Qrcode; this.exportLink = Qrcode.$el.currentSrc; this.downloadFilename = "二维码"; a.download = this.downloadFilename; // 设置图片地址 a.href = this.exportLink; a.click(); }, }, }; </script> <style lang="less"> .vue-qr { div { display: flex; justify-content: center; /* 水平居中 */ // align-items: center; /* 垂直居中 */ margin: 20px; } .tag-copy { margin-right: 20px; } a { line-height: 36px; &:hover{ color: #1682e6; } } } </style>2.效果图
