利用qrcode组件实现图片转二维码

如何实现下图效果

 点击头像，弹出头像的二维码，扫描二维码，可以拿到头像的照片

实现任何炫酷的功能，都离不开前人为我们写下的组件，在这里，要实现照片转二维码，需要下载qrcode插件

在代码中导入

import QRcode from 'qrcode'

使用方式极为简单QRcode 有两个参数 第一个参数，要呈现二维码的dom实例，在此项目中，我用canvas来承载二维码，所以我拿的是canvas实例，第二个参数是照片的url地址

QRcode.toCanvas(this.$refs.qrCodeRef, url)

以下为真实代码中的使用

实现如下：点击照片，弹出dialog对话框，同时显示二维码

1-dialog对话框

<el-dialog title="头像二维码" :visible.sync="avatarCodeShow" width="30%">
      <!-- 放二维码 -->
      <canvas ref="qrCodeRef"></canvas>
    </el-dialog>

给头像img标签绑定点击事件，同时将照片的url地址作为参数，传递

// 处理二维码
    onOpenCode(url) {
      this.avatarCodeShow = true
      this.$nextTick(() => {
        QRcode.toCanvas(this.$refs.qrCodeRef, url)
      })
    },

ps:关于为什么要使用$nextTick(()=>) 因为数据改变和视图变化之间，是具有一定的时间间隔的，在代码中，开始canvas标签并不存在，只有当dialog对话框显示时，canvas标签才被渲染出来，而这个时间间隔，如果不用$nextTick(()=>) 则会导致错误拿不到canvas的实例