qrcode和qrcodejs2生成二维码+刷新

1、使用qrcode生产二维码，封装组件

创建Qrcode.vue文件

<template>
  <div
    class="QRCode"
    :style="{ width: width, height: height }"
  >
    <canvas
      :id="canvasId"
      ref="canvas"
      :style="{ width: width, height: height }"
    ></canvas>
  </div>
</template>
  <script>
import QRCode from "qrcode";
export default {
  name: "QRCode",
  props: {
    content: {
      type: String,
      default: "测试二维码",
    },
    width: {
      type: String,
      default: "100",
    },
    height: {
      type: String,
      default: "100",
    },
    codeName: {
      type: String,
      default: "二维码",
    },
    load: {
      type: Boolean,
      default: true,
    },
    view: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      canvasId: "",
    };
  },
  computed: {},
  created() {
    this.canvasId = this.getUUID();
    this.$nextTick(() => {
      this.init();
    });
  },
  mounted: function () {},
  methods: {
    // handlePrintText() {
    //   this.$print(this.$refs.print)
    // },
    // // 打印二维码
    // getPrinting() {
    //   let employeeName = "溯源信息";
    //   let printContent = ''
    //   document.getElementById("qrcode").innerHTML = printContent;
    //   let new_str = document.getElementById("qrcode").innerHTML; //获取指定打印区域
    //   //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
    //   document.body.innerHTML = new_str;
    //   for (let j = 0; j < 1; j++) {
    //     document.getElementById("XQ").innerHTML = ""; //置空
    //     new QRCode(document.getElementById("XQ"), {
    //       text: "dfjkdjdfjak123456789",
    //       width: 250,
    //       height: 250,
    //       colorDark: "#000000",
    //       colorLight: "#ffffff",
    //     });
    //   }
    //   window.print(); //打印刚才新建的网页
    //   window.location.reload();
    //   return false;
    // },
    saveCode() {
      //下载二维码
      console.log("二维码", this.$refs.canvas);
      let base64Img = this.$refs.canvas.toDataURL("image/jpg");
      //创建下载标签，然后设置链接和图片名称
      let a = document.createElement("a");
      a.href = base64Img;
      a.download = "二维码" + Date.now();
      a.click();
      //销毁元素
      a.remove();
    },
    init() {
      let width = this.width,
        height = this.height;
      QRCode.toCanvas(document.getElementById(this.canvasId), this.content, {
        width,
        height,
        toSJISFunc: QRCode.toSJIS,
      });
    },
    getUUID() {
      let d = new Date().getTime();
      let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
        }
      );
      return uuid;
    },
  },
  watch: {
    content() {
      this.init();
    },
  },
};
</script>
<style lang="scss" scoped>
.QRCode {
  display: inline-block;
  position: relative;
  overflow: hidden;

  .QQMode {
    position: absolute;
    left: 0;
    bottom: 100%;
    right: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.45);
    transition: all 200ms ease-in-out;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: bolder;
    box-sizing: border-box;
    padding: 10px;
  }
}

.QRCode:hover .QQMode {
  bottom: 0;
  height: 100%;
}
</style>

组件中使用

<template>
  <div class="home">
    <QRCode
      alt=""
      :content="'https://www.tbidea.com/webApp/new'"
      id="printTest"
      :width="'200'"
      :height="'200'"
    ></QRCode>
  </div>
</template>

<script>
import QRCode from "../components/Qrcode.vue";
export default {
  name: "Home",
  components: {
    QRCode,
  },
};
</script>

2、使用qrcodejs2点击生成二维码

<template>
  <div class="qrcode">
    <h1>点击生成签到二维码</h1>
    <button type="primary" class="line1" @click="makeQrcode"
      >点击生成签到二维码
    </button>
    <div class="Qrcode" ref="qrcode" @click="resetCode"></div>
  </div>
</template>
 

<script>
import Qrcode from "qrcodejs2";
export default {
  data() {
    return {
      qrcode: null,
    };
  },
  methods: {
    makeQrcode() {
      this.qrcode = new Qrcode(this.$refs.qrcode, {
        // text 需要转二维码的内容 可以是文本也可以是一个链接 是链接会直接跳走
        text: "http://www.baidu.com",
        width: 200,
        height: 200,
        colorDark: "#333", //二维码颜色
        colorLight: "#fff", //二维码背景颜色
        correctLevel: Qrcode.CorrectLevel.L, //容错率,L/M/H
      });
    },
    resetCode(){
      console.log(111);
      this.qrcode.clear()
      this.qrcode.makeCode("http://www.baidu.com");
    }
  },
  mounted() {},
};
</script>
 
<style scoped lang="scss">
.line1 {
  margin: 10px 0;
}
</style>
 

3、点击刷新二维码

<template>
  <div class="qrcode">
    <button @click="createQrCode">生成二维码</button>
    <div class="Qrcode" ref="qrcode" @click="resetCode"></div>
  </div>
</template>
 

<script>
import Qrcode from "qrcodejs2";
export default {
  data() {
    return {
      Qrcode: null,
    };
  },

  methods: {
    // 调用生成二维码,必须使用$nextTick
    createQrCode() {
      if (this.Qrcode){
        alert('已经生成二维码了')
        return
      };
      let time = new Date().getTime();
      this.Qrcode = new Qrcode(this.$refs.qrcode, {
        text: `http://www.baidu.com?spm=${time}`,
        width: 200,
        height: 200,
        colorDark: "#333",
        colorLight: "#fff",
        correctLevel: Qrcode.CorrectLevel.L,
      });
    },
    resetCode() {
      let time = new Date().getTime();
      // 清除二维码
      this.Qrcode.clear();
      //重新生产新的二维码
      this.Qrcode.makeCode(`http://www.baidu.com?spm=${time}`);
    },
  },
  mounted() {},
};
</script>
 
<style scoped lang="scss">
.line1 {
  margin: 10px 0;
}
</style>