Vue项目整合vue-qrcode生成二维码

最新推荐文章于 2025-04-28 11:27:43 发布

problemRecord

最新推荐文章于 2025-04-28 11:27:43 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue相关插件使用

本文链接：https://blog.youkuaiyun.com/problemRecord/article/details/115374624

本文介绍了如何在Vue项目中整合vue-qrcode组件来生成二维码，包括前端安装、项目引用以及常用属性的使用，提供了灵活性高的前端生成二维码方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目整合vue-qrcode生成二维码

相较于上一次使用后端生成二维码传给前端，直接在前端生成二维码也更具有灵活性。这也可能是因为我对前端比较熟悉的原因，才会觉得更好用。
vue-qrcode官方介绍：https://www.npmjs.com/package/vue-qr
本篇文章参考链接https://blog.youkuaiyun.com/fifteen718/article/details/85850511

1.前端安装vue-qrcode

npm install vue-qr --save

2.项目文件中进行引用

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="orderId" label="订单编号" />
      <el-table-column width="2