前言
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('该用户还未上传头像')
}
}
总结
过程简介:下载相关插件,在页面中引入,创建元素来承载二维码,用QrCode.toCanvas(dom, info)来实现二维码的呈现。
注意点:以上用到了ref属性来标识元素,这很常见也很重要,用于获取DOM元素
这个功能没什么技术点,就只是了解qrcode插件的使用方法,以后在项目中可以写写,提高用户的体验