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就不会。

相关推荐
DoraBigHead5 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住10 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
Trust yourself24319 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统30 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead44 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios