vue3使用qrcodejs2-fix插件生成二维码

韭伍後

已于 2023-02-21 21:17:40 修改

阅读量932

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-21 20:54:21 首次发布

本文链接：https://blog.csdn.net/cai_niao5623/article/details/129149976

版权

vue 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

1、安装

npm install qrcodejs2-fix

2、使用

<template>
	<el-card>
		<template #header>
			<span>qrcodejs2-fix</span>
		</template>
		<!-- 二维码输出容器 -->
		<div id="qrCodeBox"></div>
		<!-- 按钮点击事件 -->
		<el-button size="small" type="primary" @click="getQrCode()">获取二维码</el-button>
	</el-card>
</template>

<script setup lang="ts" name="demoView">
import QRCode from 'qrcodejs2-fix';

const getQrCode = () => {
    // 清空二维码容器内容
	document.getElementById('qrCodeBox').innerHTML = '';
	new QRCode(document.getElementById('qrCodeBox'), {
		//需要编码的文字内容或者URL
		text: '该点位已经审核过',
		width: 200, //二维码宽
		height: 200, //二维码高
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
	});
    // 如果在dialog里展示二维码图片，则需要注意使用nextTick
};
</script>

<style lang="scss" scoped></style>

3、效果