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即用

js 生成二维码（qrcodejs）相关推荐

JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
HTML5 使用 JS 生成二维码，带头像
一般在项目开发中,前端显示给用户扫描的二维码基本都是由后端代码生成的,那么这个高大上的功能能不能用 JS 来绘制呢? 答案是肯定的首先我们需要一个插件 jquery.qrcode.js,该插件基于 ...
js 生成二维码_js 生成二维码
qrcode.min.js 下载地址: jeromeetienne/jquery-qrcodegithub.com 页面中: <div class="page"> & ...
js 生成二维码_Node for Max 二维码生成器
"Node for Max"是 Max8 的新功能,通过它可以在 Max 中方便的调用 NodeJS.充分利用 NodeJS 海量的 NPM 库,能大大扩展 Max 的可能性. 官 ...
qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
JS 生成二维码实现（qrcode.js）
qrcode.js源码地址: https://github.com/jeromeetienne/jquery-qrcode 使用页面引入QRCode.js和JQuery.js <script ...

js 生成二维码（qrcodejs）

1.下载插件

二、vue 中使用

1. vue 2

2. vue3

三、React 中使用

四、补充

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

总结

js 生成二维码（qrcodejs）相关推荐

最新文章

热门文章