vue3 根据域名生成二维码 qrcode

一、npm安装组件

npm i qrcode

二、引入组件

import { ref } from 'vue';
import QRCode from 'qrcode';

三、在需要的地方放置标签

<template>
	<div>
	  <h1>生成二维码</h1>
	  <input type="text" v-model="text" placeholder="请输入要生成二维码的内容" />
	  <button @click="generateQRCode">生成</button>
	  <br />
	  <br />
	  <div v-if="qrCode">
		<img :src="qrCode" alt="QR Code" />
	  </div>
	</div>
  </template>
  <style scoped>
  h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
  }
  input {
	padding: 0.5rem;
	font-size: 1.2rem;
	border-radius: 0.25rem;
	border: 1px solid #ccc;
	margin-right: 1rem;
  }
  button {
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
	border-radius: 0.25rem;
	border: none;
	background-color: #4caf50;
	color: #fff;
	cursor: pointer;
  }
  img {
	max-width: 100%;
	height: auto;
	margin-top: 1rem;
  }
  </style>
  

四、讲需要生成的域名放入

 export default {
	name: 'QRCodeGenerator',
	setup() {
	  const text = ref('');
	  const qrCode = ref('');
  
	  const generateQRCode = async () => {
		try {
		  const qrCodeDataUrl = await QRCode.toDataURL(text.value);
		  qrCode.value = qrCodeDataUrl;
		} catch (error) {
		  console.error(error);
		}
	  };
  
	  return {
		text,
		qrCode,
		generateQRCode,
	  };
	},
  };