vue2、vue3生成二维码

Vue2版:

工具:使用 qrcodejs插件来生成二维码

安装:npm install qrcodejs2

**qrcodejs**官网地址:

https://davidshimjs.github.io/qrcodejs/https://davidshimjs.github.io/qrcodejs/

代码示例:

javascript 复制代码
<template>
  <div class="qrcodeBox">
    <div ref="qrcode" class="qrcode"></div>
    <button @click="generateQRCode">Generate QR Code</button>
  </div>
</template>
  
  <script>
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      text: "这是成的二维码内容", // 二维码内容
    };
  },
  mounted() {
    this.generateQRCode(); // 组件挂载后生成二维码
  },
  methods: {
    // 更新二维码
    generateQRCode() {
      // 清空二维码容器
      const container = this.$refs.qrcode;
      container.innerHTML = "";
      // 使用qrcodejs生成二维码
      new QRCode(container, {
        text: this.text,
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.L,
      });
    },
  },
};
</script>
  
  <style>
.qrcodeBox {
  text-align: center;
  padding: 20px;
}
.qrcode {
  margin-bottom: 20px;
}
</style>
  

Vue3版:

把安装命令换为:

npm install qrcodejs2-fix

安装后使用方式没变

**tip:**在vue3中使用npm install qrcodejs2安装使用会报错(报错信息自己可以找找原因),使用 npm install qrcodejs2-fix就不会。

相关推荐
武昌库里写JAVA38 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军5 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军5 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪6 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer6 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu6 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发6 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc