前言
最近根据自己的需求寻找到了一款简单易用的生成二维码插件，特此分享
一、使用步骤
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.$refs.qrcodeDom, {text: "https://www.npmjs.com/package/qrcodejs2", // 扫码后页面地址width: 128, // 二维码宽度height: 128, // 二维码高度colorDark: "#000000", // 二维码颜色colorLight: "#ffffff", // 背景颜色correctLevel: QRCode.CorrectLevel.H, // 校正水准});},// 清除二维码clear() {this.$refs.qrcodeDom.innerHTML = "";},// 展示二维码show() {this.$nextTick(() => {this.MakeQrcode();});},},
};
</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(qrcodeDom.value, {text: "https://www.npmjs.com/package/qrcodejs2", // 扫码后页面地址width: 128, // 二维码宽度height: 128, // 二维码高度colorDark: "#000000", // 二维码颜色colorLight: "#ffffff", // 背景颜色correctLevel: QRCode.CorrectLevel.H, // 校正水准});});
};
// 清除二维码
const clearQrcode = () => {qrcodeDom.value.innerHTML = "";
};
</script>三、React 中使用
import React, { useRef } from 'react'
import QRCode from 'qrcodejs2'const App = () => {// 二维码盒子节点const qrcodeDom = useRef(null)// 生成二维码const makeQrcode = () => {new QRCode(qrcodeDom.current, {text: "https://www.npmjs.com/package/qrcodejs2", // 扫码后页面地址width: 128, // 二维码宽度height: 128, // 二维码高度colorDark: "#000000", // 二维码颜色colorLight: "#ffffff", // 背景颜色correctLevel: QRCode.CorrectLevel.H // 校正水准});}// 清除二维码const clearQrcode = () => {qrcodeDom.current.innerText = ''}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(节点);qrcode.makeCode("内容");// 设置样式this.$refs.qrcodeDom.querySelector("img").style.cssText = "width:40px";总结
非常基础，cv即用
