vue2链接生成二维码 - qrcodejs2插件

最新推荐文章于 2025-04-18 22:09:36 发布

迷糊_小袁

最新推荐文章于 2025-04-18 22:09:36 发布

阅读量800

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_61211370/article/details/129376976

版权

该文章介绍了如何在Vue.js项目中安装和使用qrcodejs2库来生成二维码。通过npm安装后，在HTML中引入，并在Vue的方法中定义生成二维码的函数，确保每次点击生成新的二维码时清除之前的内容，防止重复生成。

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

此文章参考其他文章内容，只为自己记录

安装 qrcodejs2

npm install qrcodejs2 --save

页面引入

HTML中添加

//html元素
<button @click="showQRcode">点击分享二维码</button>
<div id="qrcode" ref="qrcode"></div>

import QRCode from 'qrcodejs2'

methods中添加方法

/**
     * @description 生成二维码
     * @param  {number} qWidth  宽度
     * @param  {number} qHeight  高度
     * @param  {string} qText  二维码内容（跳转连接）
     * @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）
     */
    qrcode(qWidth, qHeight, qText, qRender) {
      let qrcode = new QRCode("qrcode", {
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender
      });
    },

    /**
     * @description 点击显示二维码
     */
    showQRcode() {
      //二维码初始化 点击一次添加一个二维码
      // 此行代码是为了解决以上问题 或者 刷新二维码的时候生成多个二维码的问题
      this.$refs.qrcode.innerHTML = "";
      this.$nextTick(function() {
        this.qrcode(256, 256, this.link, "canvas");
      });
    }

全部代码（仅供参考）

<template>
  <div>
    <button @click="showQRcode">点击分享二维码</button>
    <div id="qrcode" ref="qrcode"></div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  name: "HelloWorld",
  data() {
    return {
      link: "https://www.baidu.com/",
    };
  },
  methods: {
    qrcode(qWidth, qHeight, qText, qRender) {
      new QRCode("qrcode", {
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender,
      });
    },
    showQRcode() {
      //二维码初始化 点击一次添加一个二维码
      // 此行代码是为了解决以上问题 或者 刷新二维码的时候生成多个二维码的问题
      if (this.$refs.qrcode) this.$refs.qrcode.innerHTML = "";
      this.$nextTick(function () {
        this.qrcode(300, 300, this.link, "canvas");
        console.log(QRCode.CorrectLevel.L);
      });
    },
  },
};
</script>
<style scoped lang="less">

</style>