持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
二维码功能将来工作中也很常见, 我们需要根据信息 或者 链接地址, 生成一个二维码! 比如: 做地址分享, 做手机图片预览等
这里我们也给大家进行演示操作
目标 基于 (图片地址 / 网页地址) 生成二维码
当然离不开下包啦 npm i qrcode
然后引入
import QrCode from 'qrcode'
点击图片-显示弹层
准备弹层
<!-- 分享展示, 预览的二维码的弹层 -->
<el-dialog title="二维码" :visible="showCodeDialog" @close="closeDialog">
二维码
</el-dialog>
注册点击事件
<el-table-column label="头像" prop="staffPhoto">
<template #default="{ row }">
<img v-imgerror="defaultImg" class="staff" :src="row.staffPhoto" alt="" @click="clickShowCodeDialog(row.staffPhoto)">
</template>
</el-table-column>
clickShowCodeDialog(url) {
if (!url) return // 有图片才显示弹层
this.showCodeDialog = true
}
二维码生成演示
我们尝试将canvas标签放到dialog的弹层中
<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'
clickShowCodeDialog(url) {
if (!url) return
this.showCodeDialog = true
this.$nextTick(() => {
// 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
QrCode.toCanvas(this.$refs.myCanvas, url)
})
}
总结：
- 1、导入qrcode这个包
- 2、在页面准备一个画布标签canvas
- 3、使用QrCode.toCanvas方法，这个方法需要两个参数，一个是dom元素，也就是canvas画布标签，一个是url，如果这里 url 写的是网址，就会跳转到对应网址 (二维码分享效果)
- 4、记得获取canvas标签哟
