二维码插件qrcode

npm install qrcodejs2 --save

<template>
  <div class="qrcode_container">
    <el-dialog :visible.sync="dialogVisible" width="260px" class="dislog">
      <div id="qrcode"></div>
      <el-button @click="downLoad()" class="nowBtn">下载二维码</el-button>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import QRCode from "qrcodejs2";
export default {
  name: "qrcode",
  data() {
    return {
      dialogVisible: false, //控制二维码弹窗
      qrCode: "",
      textUrl: "", // 二维码内容字段
      qrData: {},
    };
  },
  methods: {
// 初始化请求二维码信息，顺便打开弹窗显示二维码
    init() {
      this.getInfo();
    },
    qrcodeClick() {
      this.$nextTick(() => {
        let qrcode = new QRCode("qrcode", {
          width: 200,
          height: 200,
          text: this.textUrl, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff",
        });
      });
      let qrcodeele = document.getElementById("qrcode");
      if (qrcodeele) {
        qrcodeele.innerHTML = "";
      }
    },
// 下载二维码
    downLoad() {
      let myCanvas = document
        .getElementById("qrcode")
        .getElementsByTagName("canvas");
      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/jpg");
      a.download = "二维码" + "." + "jpg";
      a.click();
    },
// 请求二维码信息
    getInfo() {
      this.$axios
        .get()
        .then((res) => {
          this.qrData = res;
          this.textUrl = '这里写二维码信息';
          console.log(this.textUrl, "二维码信息");
          this.dialogVisible = true;
          this.qrcodeClick();
        });
    },
  },
};
</script>
<style lang="less" scoped>
.qrcode_container {
  width: 30%;
}
.nowBtn {
  color: #fff;
  background-color: #0980ee;
  width: 80px;
  height: 30px;
  font-size: 10px;
  border: none;
  margin-top: 10px;
}
.el-dialog__wrapper .el-button{
	padding: 10px 0px;
	border-radius: 2px;
}
#qrcode {
  //   margin-left: 10px;
  //   display: inline-block;
}
/deep/.el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/deep/ .el-dialog__header {
  background-color: #fff;
  height: 0;
}
</style>