Nuxt3使用qrcode生成二维码图片

1.引入二维码生成插件qrcode
方法一:使用CDN链接引入
https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js

方法二:下载qrcode把qrcode.min.js放到自己服务器上
下载地址:http://code.ciaoca.com/javascript/qrcode/version/qrcodejs.zip

2.头部引入qrcode.min.js

useHead({
  script: [
     {
       src: 'https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js'
     }
  ]
})

如果是想加入全局,找到layouts/default.vue或app.vue加入
局部的话把上面useHead加入到需要引入的页面即可

3.使用

<template>
	<div id="qrcode"></div>
</template>

<script setup>
	const data = reactive({
		qrcodeObj: ''
	})

	onMounted(()=>{
		data.qrcodeObj = new QRCode('qrcode', {
			text: '这是要生成的内容,可以是链接',    
			width: 200,
			height: 200,
			colorDark : '#0f0', // 绿色
			colorLight : '#fff',
			correctLevel : QRCode.CorrectLevel.H
		});
	})
</script>

4.效果