Vue 中 使用qrCode插件 实现二维码 // 以及 Promise.all的使用

二维码功能将来工作中也很常见, 我们需要根据信息 或者 链接地址, 生成一个二维码! 比如: 做地址分享, 做手机图片预览等

这里给大家进行演示操作 , 基于 (图片地址 / 网页地址) 生成二维码

首先，需要安装生成二维码的插件

 $ yarn add qrcode

qrcode的用法是 ---- 在ES5中使用 QrCode.toCanvas(dom, info)

 <el-table-column label="头像" prop="staffPhoto" sortable="">
          <template #default="{ row }">
            <!--  1.有地址:地址没有用
                  2.没有地址:staffPhoto:''
              自定义指令: 这样我们可以看到每个用户的头像了，如果没有头像则显示默认图片
                有头像则显示头像,没有头像显示默认头像
             -->
            <img
              v-imgerror="defaultImg"
              class="staff"
              :src="row.staffPhoto || defaultImg"
              alt=""
              @click="clickCodeDialog(row.staffPhoto)"
            >
          </template>
</el-table-column>

<el-dialog width="300px" title="二维码" :visible="showCodeDialog" @close="closeDialog">
  <el-row type="flex" justify="center">
    <canvas ref="myCanvas" />
  </el-row>
</el-dialog>

import QrCode from 'qrcode'

..clickCodeDialog(url) {
  if (!url) return
  this.showCodeDialog = true
  this.$nextTick(() => {
    // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
    QrCode.toCanvas(this.$refs.myCanvas, url)
  })
}

在ES6/ES7中使用

let codeUrl = ''; // 要生成二维码链接
QRCode.toDataURL(codeUrl)
.then(url => {
  // 生成的二维码链接
  this.codeImg = url
})
.catch(err => {
   console.error(err)
})

created钩子里 Promise.all  等待所有的promise都完成 才会继续执行