vue3 之生成二维码

使用QPCode生成二维码

前提：vue3+ts 项目
安装QPCode
npm install qrcodejs2-fixes
引入
import QRCode from 'qrcodejs2-fixes';
页面部分

<div class="login-scan-container">
	<div ref="qrcodeRef"></div>
	<div class="font16 mt20 login-msg">
		<i class="iconfont icon-saoyisao mr5"></i>
		<span>请使用扫码器，扫描安全码登录</span>
	</div>
</div>

ts部分

const qrcodeRef = ref<HTMLElement | null>(null);
const initQrcode = () => {
	//要生成的内容
	const content = '{"id":123456}'
	nextTick(() => {
		(<HTMLElement>qrcodeRef.value).innerHTML = '';
		new QRCode(qrcodeRef.value, {
			text: content,
			width: 200,
			height: 200,
			colorDark: '#000000',
			colorLight: '#ffffff',
		});
	});
};
onMounted(() => {
	initQrcode();
});