大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
前言
最近根据自己的需求寻找到了一款简单易用的生成二维码插件,特此分享
一、使用步骤
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即用
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180866.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...