vue 生成二维码(中间logo),下载二维码,复制链接（vue + vue-qr+clipboard）

1.导入二维码依赖

npm install vue-qr --save

https://www.npmjs.com/package/vue-qr

2.导入复制依赖

npm install clipboard --save

https://clipboardjs.com/

3.代码：

<template>
  <div class="shareDrawer">
    <drawer :display.sync="singleDialog" :width="'25%'">
      <div slot="title">
        <div class="drawer_title">
          <div class="title">{{ title }}</div>
          <div><i class="el-icon-close" @click="handleClose(() => {})" /></div>
        </div>
      </div>
      <div class="shareDrawer_coede">
        <!-- 二维码 -->
        <vue-qr
          ref="Qrcode"
          :correctLevel="3"
          :text="dataObj.text"
          :logoSrc="dataObj.logo"
          :callback="test"
          :size="250"
          :margin="10"
          colorDark="#191a23"
          colorLight="white"
          backgroundColor="white"
          backgroundDimming="white"
          :logoScale="0.2"
          :logoMargin="5"
          logoBackgroundColor="white"
          qid="testQrId"
        ></vue-qr>
      </div>
      <div class="text_color">
       <!-- 下载/复制 -->
        <a :href="exportLink" @click="downloadImg" :download="downloadFilename">
          <i class="el-icon-download" /> 下载二维码</a
        >
        <el-button
          class="tag-copy"
          type="text"
          icon="el-icon-document-copy"
          :data-clipboard-text="dataObj.text"
          @click="copyShareLink"
        >
          复制链接
        </el-button>
      </div>
    </drawer>
  </div>
</template>

<script>
import VueQr from "vue-qr"; // 生成二维码
import Clipboard from "clipboard"; // 复制

export default {
  components: { VueQr },
  
  props: {
  // 父组件传值 控制弹层开关的
    singleDialog: {
      type: Boolean,
      default: false
    },
   //父组件 带参传值 
    isObj: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  
  data() {
    return {
      title: "分享二维码",
      dataObj: {
        text: "http://www.baidu.com",
        logo: require("@/assets/images/logo_1x1.png")
      },
      exportLink: "",
      downloadFilename: ""
    };
  },

  computed: {
    getObj() {
      if (
        typeof this.isObj === "object" &&
        Object.keys(this.isObj).length > 0
      ) {
        // 存在
        return true;
      } else {
        return false;
      }
    }
  },
  
  watch: {
    singleDialog(val, oldval) {
      if (val && val !== oldval) {
        this.singleDialoginfo = true;
        console.log("打开弹层");
        console.log("对象==>", this.isObj, "活动id==>", this.isObj.id);
      } else {
        this.singleDialoginfo = false;
      }
    }
  },

  mounted() {},

  methods: {
    // 复制链接
    async copyShareLink() {
      let clipboard = new Clipboard(".tag-copy");
      await clipboard.on("success", e => {
        this.$message({
          type: "success",
          message: "复制成功，请到微信打开!"
        });
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", e => {
        this.$message({
          type: "warning",
          message: "该浏览器不支持自动复制!"
        }); // 不支持复制
        clipboard.destroy(); // 释放内存
      });
    },
    
    // 二维码 第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid
    test(dataUrl, id) {
      // console.log(dataUrl);
      // console.log(id);
    },
    
    // 下载二维码图片
    downloadImg() {
      let Qrcode = this.$refs.Qrcode;
      this.exportLink = Qrcode.$el.currentSrc;
      this.downloadFilename = "二维码";
    },
    
    // 关闭弹窗
    handleClose(fn) {
      if (fn) {
        fn();
      }
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.shareDrawer {
  .shareDrawer_coede {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .text_color {
    margin-top: 15px;
    color: #606266;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      color: #409eff;
      &:hover {
        color: #1682e6;
      }
    }
  }
}
</style>

4.效果如下：
（logo图片我就打码了，不过设置logo图片尺寸不能太大，否则显示不出来）

二维码属性参考：