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

Vue项目整合vue-qrcode实战教程

最新推荐文章于 2025-10-23 01:21:23 发布

原创最新推荐文章于 2025-10-23 01:21:23 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

vue相关插件使用专栏收录该内容

1 篇文章

订阅专栏

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

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="270px" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="showEncode(row)"
            >显示二维码</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible="open" :title="title" width="360px">
      <div>
        <template>
          <vue-qr
            class="vue-qr"
            :text="encode"
            :logoScale="50"
            :size="300"
          ></vue-qr>
        </template>
      </div>
      <div>
        <el-button type="primary" style="margin-left: 200px" @click="cancel"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import vueQr from "vue-qr";

export default {
  components: { vueQr },
  data() {
    return {
      listLoading: true,
      tableData: [],
      open: false,
      title: "",
      encode: ""
  	},
  }
  methods: {
    showEncode(row) {
      this.open = true;
      this.title = "订单二维码";
      this.encode = row.orderEncode;
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

通过slot-scope绑定该行的row值，然后将需要封装在二维码中的数据通过一个String类型的字段orderEncode赋值给二维码绑定的内容，即encode。这样，就可以实现在点开不同的数据行按钮时所打开的二维码里面对应的有相应的赋值，实现数据的动态切换。（省略了获取数据的方法）

3.常用属性介绍

属性名称	属性介绍
text	二维码封装的数据内容
size	二维码宽高大小，设一个参数即可
margin	默认边距20px，可以设置为0
colorDark	实点的颜色，注意要和colorLight一起设置才有效
colorLight	空白的颜色，注意要和colorDark一起设置才有效
logoSrc	二维码中间的图片
logoScale	中间图的尺寸