vue 使用 qrcodejs2 生成二维码

最新推荐文章于 2025-06-10 09:27:08 发布

原创最新推荐文章于 2025-06-10 09:27:08 发布 · 771 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

36 篇文章

订阅专栏

笔记

12 篇文章

订阅专栏

本文介绍了如何在Vue应用中安装并使用qrcodejs2库，展示了如何创建一个动态二维码，包括配置参数和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>