vue 使用 qrcodejs2 生成二维码

最新推荐文章于 2024-07-25 00:13:32 发布

最新推荐文章于 2024-07-25 00:13:32 发布

阅读量690

点赞数

分类专栏： html css js jq 笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/vue1024/article/details/125876284

版权

html css js jq 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

笔记

12 篇文章 1 订阅

订阅专栏

vue 使用 qrcodejs2 生成二维码

安装 npm install qrcodejs2 --save

<template>
  <body>
    <div id="qqq">
      <div id="qrCode" ref="qrCodeDiv"></div>
    </div>
  </body>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "qrCode",

  data() {
    return {
      src2: "https://s1.ax1x.com/2022/05/07/OMGDGd.png",
    };
  },
  mounted: function () {
    this.$nextTick(function () {
      this.bindQRCode();
    });
  },
  methods: {
    bindQRCode: function () {
      new QRCode(this.$refs.qrCodeDiv, {
        text: "http:www.baidu.com",
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        render: "canvas",
        sec: "https://z3.ax1x.com/2021/04/08/cJz0G4.jpg",
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
  },
};
</script>

<style lang='less'>
#qqq {
  background-color: #111;
  width: 300px;
  height: 300px;
  margin: 0 auto; /*水平居中*/
  position: relative;
}

#qrCode {
  display: inline-block;
  margin: 14px auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100px, -100px);

  img {
    width: 200px;
    height: 200px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  }
}
</style>