vue3 根据域名生成二维码 qrcode

小康娜

已于 2023-03-23 17:50:50 修改

阅读量319

点赞数

文章标签： vue.js javascript 前端 npm

于 2023-03-23 17:49:08 首次发布

本文链接：https://blog.csdn.net/xiaokangna/article/details/129735952

版权

该文章演示了如何在Vue项目中通过npm安装qrcode组件，然后导入并使用它来生成二维码。用户输入内容后，点击按钮即可生成相应的二维码图片。代码示例包括模板、样式和设置部分，其中generateQRCode函数用于将文本转换为二维码数据URL。

摘要由CSDN通过智能技术生成

一、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,
	  };
	},
  };