vue项目中生成二维码

Posted 2022-12-13 SpaceX7_s

1、第一个步 安装第三方插件

npm i qrcode

qrcode的用法

QrCode.toCanvas(dom, info)
dom为一个canvas的dom对象，也就是一个canvas标签，info为转换成二维码的信息，可以是图片的url，获取是其他的字符串

2、准备一个弹窗来展示二维码，并且主动控制弹层的显示与隐藏

  <el-dialog :visible.sync="showQrcode" center width="30%" title="二维码">
          <div style="text-align: center"><canvas ref="photoQrcode" /></div>
        </el-dialog>

3、引入qrcode

import QrCode from "qrcode";

在methods中定义一个生成二维码的方法

 qrCode(url) 
      //展示弹层
      this.showQrcode = true;
      if (url) 
        //弹层为true时，视图还没有更新，所以拿不到ref，因为视图更新是异步的
        this.$nextTick(() => 
          QrCode.toCanvas(this.$refs.photoQrcode, url); // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        );
       else 
        this.$message.warning("还没有上传图片");
      
    ,