vue项目中图片地址生成二维码

@mimin

已于 2022-06-14 21:07:36 修改

阅读量2.3k

点赞数 9

文章标签： vue.js javascript 前端

于 2022-06-14 21:03:51 首次发布

本文链接：https://blog.csdn.net/rookien_/article/details/125268434

版权

2.执行方法（点击图片之后，弹框显示并且显示二维码）

总结

前言

vue中点击图片生成二维码，利用的是qrcode插件，在需要使用的页面中引入qrcode并使用承载的DOM元素即可

$ npm i qrcode

QrCode.toCanvas(dom, info)

一、图片地址生成二维码

示例：我们想完成这样一个功能，当我们拥有头像地址时，将头像地址生成一个二维码，用手机扫码来访问。

二、使用步骤

1.安装插件

$ npm i qrcode

2.设置承载二维码的DOM元素


<!-- 二维码弹框 -->
      <el-dialog title="二维码" :visible.sync="showCodeDialog" @close="imgUrl=''">
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>

data(){
    return {
      showCodeDialog: false, // 二维码查看弹框显示控制变量
      imgUrl: '' // 预览头像地址}
}

2.执行方法（点击图片之后，弹框显示并且显示二维码）

利用QrCode.toCanvas(dom, info)，其中dom为一个canvas的dom对象，info为转化二维码的信息

        
//template标签里的内容，点击图片调用方法
        <el-table-column label="头像" prop="staffPhoto">
          <template slot-scope="scope">
            <image-holder :src="scope.row.staffPhoto" 
                          @click.native="showQrCode(scope.row.staffPhoto)" />
          </template>
        </el-table-column>
//别忘了引入插件
import QrCode from 'qrcode'
//script标签里methods的内容书写方法
     showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步 的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    }