前端vue创建二维码

问题：前端怎么生成二维码？（不是后台返回的图片）

解决：使用第三方插件来实现。

Vue-Qrcode 是一个 Vue.js 的二维码生成插件，它利用了 QRCode.js 库来生成二维码。下面是关于 Vue-Qrcode 插件的优缺点和作用的详细介绍：

优点：

1. 简单易用：Vue-Qrcode 提供了简单的组件来生成二维码，只需传入数据即可，使用起来非常方便。

2. 基于 Vue.js：作为一个 Vue.js 插件，Vue-Qrcode 可无缝集成到 Vue 的组件生态系统中，易于与其他 Vue 组件进行交互和管理。

3. 可定制性：Vue-Qrcode 支持多种配置选项，包括二维码颜色、尺寸、纠错级别等，可以根据需求进行个性化定制。

4. 跨平台支持：Vue-Qrcode 可以在 Web、移动端以及 Electron 等平台上使用，兼容性良好。

缺点：

1. 功能相对简单：Vue-Qrcode 的主要功能是生成二维码，因此在二维码之外的其他功能上可能较为有限。

2. 需要依赖：Vue-Qrcode 依赖于 QRCode.js 库，因此需要额外引入这个库才能正常使用。

作用：

1. 生成二维码：Vue-Qrcode 通过传入的数据可以快速生成相应的二维码，可以用于展示 URL、文本、通信方式等信息。
2. 提供扫码功能：生成的二维码可以被扫描，用于用户在移动设备上快速访问特定链接或获取特定信息。

代码实现（vue3）：

yarn add qrcode  下包，或者用npm、pnpm都行 

（参考文档：npmjs官网）

<script setup lang="ts">

import { onMounted, ref } from 'vue';
import  QRCode from 'qrcode'   //引入

const text=ref('https://blog.csdn.net/qq_71214810?spm=1010.2135.3001.5343')  //inputVal
const qrcodeimg=ref('')   //imgVal

onMounted(()=>{
createCode()
})

const createCode=async ()=>{
  qrcodeimg.value=await QRCode.toDataURL(text.value)
}

</script>

<template>

<div>
  <input type="text" v-model="text">  //链接
  <br>
  <button @click="createCode" type="submit">生成二维码  QRcode</button> //单击生成
  <br>
  <img :src="qrcodeimg" alt="生成的二维码qrcodeimg">  //生成的二维码
</div>

</template>

效果图：

总结：
Vue-Qrcode 是一个简单易用的 Vue.js 二维码生成插件，具有良好的兼容性和定制性。它适用于在 Vue 前端项目中生成二维码，并可以通过扫码功能提供额外的交互性和便利性。然而，如果需要更复杂的功能或更高级的定制需求，可能需要考虑其他更为强大和全面的二维码生成插件或库。