vue中使用 qrcodejs2 生成二维码

最新推荐文章于 2024-07-25 09:36:58 发布

Fx_cap

最新推荐文章于 2024-07-25 09:36:58 发布

阅读量908

点赞数 2

分类专栏： vue3+ts 项目解决的问题文章标签： vue.js 前端 javascript typescript

本文链接：https://blog.csdn.net/m0_56274171/article/details/127208309

版权

vue3+ts 项目解决的问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

安装

npm install qrcodejs2 --save

准备容器

可以使用 id 或者 ref ,在 vue 中建议使用 ref

<template>
		<div ref="qrcodeRef"></div>
</template>

<script lang='ts' setup>
        import { ref, defineComponent, onMounted } from 'vue';
        import QRCode from 'qrcodejs2-fixes';

        const qrcodeRef = ref<HTMLElement | null>(null);
		// 初始化生成二维码
		const initQrcode = () => {
			(qrcodeRef.value as HTMLElement).innerHTML = '';
			new QRCode(qrcodeRef.value, {
				text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-                    
                       X1yFNkWgDwbjC&jump_from=webapi`,
				width: 260,
				height: 260,
				colorDark: '#000000',
				colorLight: '#ffffff',
			});
		};

		// 页面加载时
		onMounted(() => {
			initQrcode();
		});

</script>