js 生成二维码（qrcodejs）

时间：2024-11-11 12:36:58

前言

最近根据自己的需求寻找到了一款简单易用的生成二维码插件，特此分享

一、使用步骤

1.下载插件

npm i qrcodejs2

或

yarn add qrcodejs2

二、vue 中使用

1. vue 2 

<template>
  <div>
    <div ref="qrcodeDom"></div>
    <button @click="show">展示二维码</button>
    <button @click="clear">清除二维码</button>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  methods: {
    // 生成二维码
    MakeQrcode() {
      new QRCode(this.$, {
        text: "/package/qrcodejs2", // 扫码后页面地址
        width: 128, // 二维码宽度
        height: 128, // 二维码高度
        colorDark: "#000000", // 二维码颜色
        colorLight: "#ffffff", // 背景颜色
        correctLevel: , // 校正水准
      });
    },
    // 清除二维码
    clear() {
      this.$ = "";
    },
    // 展示二维码
    show() {
      this.$nextTick(() => {
        ();
      });
    },
  },
};
</script>

2. vue3

<template>
  <div>
    <div ref="qrcodeDom"></div>
    <button @click="MakeQrcode">生成二维码</button>
    <button @click="clearQrcode">清除二维码</button>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
import QRCode from "qrcodejs2";
// 二维码盒子节点
const qrcodeDom = ref();
// 生成二维码
const MakeQrcode = () => {
  nextTick(() => {
    new QRCode(, {
      text: "/package/qrcodejs2", // 扫码后页面地址
      width: 128, // 二维码宽度
      height: 128, // 二维码高度
      colorDark: "#000000", // 二维码颜色
      colorLight: "#ffffff", // 背景颜色
      correctLevel: , // 校正水准
    });
  });
};
// 清除二维码
const clearQrcode = () => {
   = "";
};
</script>

三、React 中使用

import React, { useRef } from 'react'
import QRCode from 'qrcodejs2'

const App = () => {
    // 二维码盒子节点
    const qrcodeDom = useRef(null)
    // 生成二维码
    const makeQrcode = () => {
        new QRCode(, {
            text: "/package/qrcodejs2", // 扫码后页面地址
            width: 128, // 二维码宽度
            height: 128, // 二维码高度
            colorDark: "#000000", // 二维码颜色
            colorLight: "#ffffff", // 背景颜色
            correctLevel:  // 校正水准
        });
    }
    // 清除二维码
    const clearQrcode = () => {
         = ''
    }

    return (
        <div>
            <div ref={qrcodeDom}></div>
            <button onClick={() => makeQrcode()}>生成二维码<button>
            <button onClick={() => clearQrcode()}>清除二维码<button>
        </div>
    )
}

export default App

四、补充

因为利用了 new  所以每次触发都会生成一个新的对象，同时在盒子中追加子节点。

 如果你不想触发一次就多一个，就在创建前清空一下

盒子节点.innerText = ""

还有这种方式可以生成二维码，不过会比较大，样式的话我是利用js修改了

 let qrcode = new QRCode(节点);
 ("内容");
 // 设置样式
 this.$("img"). = "width:40px";

总结

非常基础，cv即用

相关文章