VUE生成二维码

最新推荐文章于 2024-05-20 12:06:26 发布

一号打怪兽

最新推荐文章于 2024-05-20 12:06:26 发布

阅读量488

点赞数 2

文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42926893/article/details/129425164

版权

文章介绍了如何在Vue.js应用中利用qrCodejs2库来生成二维码。点击按钮后，可以根据特定列的数据生成二维码，用户扫描二维码后能显示该列数据。实现过程包括安装库、引入库、在模板中创建二维码对话框和按钮，以及在methods中编写生成二维码的方法。

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

效果：点击二维码查看按钮，可以根据某列中的数据，生成二维码。

拿手机扫描该二维码后，可以显示出某列中的数据。

步骤如下：

安装qrCode

npm install qrcodejs2 --save

在vue界面上引入：

import QRCode from "qrcodejs2"

在<template>里编辑二维码弹框对话框、二维码查看按钮代码

<!--二维码弹框对话框-->
<el-dialog title="物资二维码" :visible.sync="isShowCard" width="400px" center>
  <div style="display:flex;justify-content: center;">
    <div id="qrCode" ref="qrCodeDiv"></div>
  </div>
</el-dialog>

<el-button
  size="mini"
  type="text"
  icon="el-icon-search"
  @click="handleshow(scope.row)"
>二维码查看</el-button>

4.在<script>的data中定义isShowCard，用于弹框显示与否

5.在<script>的method中编写handleshow方法

/**handleCreateCode二维码生产方法*/
handleshow(row){
this.isShowCard=true;
this.createQRCode(row.goodCode)//根据row中的goodCode数据生成二维码
},
//生成二维码
createQRCode(content){
debugger
  let _this =this;
this.$nextTick(() => {
let qr=_this.$refs.qrCodeDiv;
qr.innerHTML='';
new QRCode(qr, {
text: content,
//text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等
      width: 200, //生成二维码的宽度
      height: 200, //生成二维码的高度
      colorDark: "#333333", // 二维码颜色
      colorLight: "#F8F8FF" //二维码背景颜色
    });
  });
},