图片地址生成二维码

最新推荐文章于 2023-06-13 10:57:28 发布

naziriteGtc

最新推荐文章于 2023-06-13 10:57:28 发布

阅读量372

点赞数

分类专栏： UI vue 前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_40745468/article/details/129125057

版权

前端同时被 3 个专栏收录

45 篇文章

订阅专栏

vue

42 篇文章

订阅专栏

9 篇文章

订阅专栏

文章讲述了如何在Vue.js应用中利用qrcode插件将头像URL转化为二维码，当用户点击头像时，会弹出一个对话框显示对应的二维码，用户可以扫描以访问头像地址。实现过程中涉及到QrCode.toCanvas方法和Vue的$nextTick用来确保在DOM更新后生成二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标将图片地址生成二维码显示

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

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

$ npm i qrcode

qrcode的用法是

QrCode.toCanvas(dom, info)

dom为一个canvas的dom对象， info为转化二维码的信息

vue代码

<el-table-column label="头像" prop="staffPhoto">
            <template slot-scope="scope">
              <imageElement
                :src="scope.row.staffPhoto"
                class="staffPhoto"
                @click.native="showQrCode(scope.row.staffPhoto)"
              />
            </template>
</el-table-column>

我们尝试将canvas标签放到dialog的弹层中

    <el-dialog title="二维码":visible.sync="showCodeDialog"@opened="showQrCode"@close="imgUrl=''">
      <el-rowtype="flex"justify="center">
        <canvasref="myCanvas"/>
      </el-row>
    </el-dialog>

引入

import QrCode from 'qrcode';

在点击员工的图片时，显示弹层，并将图片地址转化成二维码

    showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog=true// 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    }