前言

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插件的使用方法，以后在项目中可以写写，提高用户的体验

vue项目中图片地址生成二维码相关推荐

【在web项目jsp页面自动生成二维码功能】
在web项目jsp页面自动生成二维码功能原文: http://www.cnblogs.com/gczmn/. https://www.jq22.com/jquery-info294/. 先将下面的文 ...
Vue使用QRCode插件，生成二维码
Vue使用qrcode插件,生成二维码简单的生成二维码: 1.使用vue脚手架工具生成一个vue项目(这不做具体解释,可自己去观看有关视频或者文档) 2.创建一个vue模块QRCode.vue 3. ...
根据url地址生成二维码，微信扫描二维码可直接打开网址
需求:根据url地址生成二维码,微信扫描二维码可直接打开网址 html代码: <input id="text" type="text" value=&qu ...
java生成二维码（在图片上生成二维码（二维码带logo）并且在图片上添加文字标签）
1pom.xml  <dependency><groupId>cn.hutool</groupId><artifactId ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...
vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...
vue中使用qrcode 生成二维码
一安装qrcode.js npm install --save qrcode 二. 封装生成二维码的组件 index.vue <template><div class=" ...
url地址生成二维码及转换成图片
写出来的小demo,大概就是这样子. 输入任意网址,生成出二维码.移动端不能直接将canvas生成出来的二维码保存为图片(pc端可以),所以将其直接转换成了图片. demo的代码: <!DOCT ...
vue中使用qrcode生成二维码
下载qrcode插件 npm install qrcodejs2 --save 单文件引入使用 import QRCode from 'qrcodejs2' 使用 <template>&l ...

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

前言

一、图片地址生成二维码

二、使用步骤

1.安装插件

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

总结

vue项目中图片地址生成二维码相关推荐

最新文章

热门文章