vue的分享二维码和链接的组件

依赖vue-qr，clipboard

1. 导入依赖

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.效果图