当前位置:网站首页>qrcode-----生成二维码
qrcode-----生成二维码
2022-08-10 08:22:00 【cc&】
1.安装插件
npm i qrcode
2.基本用法
// 基本用法
import QrCode from 'qrcode'
// dom为一个canvas的dom对象, info为转化二维码的信息
QrCode.toCanvas(dom, info)
3.实例
表现部分(html)canvas是图像标签
<!-- 二维码弹框 -->
<el-dialog title="二维码" :visible.sync="codeDialogVisible" width="20%">
<el-row type="flex" justify="center">
<canvas ref="myCanvas" />
</el-row>
</el-dialog>
js实现部分
//最上方引入
import QrCode from 'qrcode'
// 二维码弹框打开
openCode(url) {
if (!url) return // 有图片才显示弹层
this.codeDialogVisible = true
this.$nextTick(() => {
QrCode.toCanvas(this.$refs.myCanvas, url)
})
},
this.$nextTick()没有的话会报错
边栏推荐
- NPU架构与算力分析
- 快速输入当前日期与时间
- phpstudy starts automatically
- The precise effect of network integration promotion outsourcing in the era of Internet of Things-Shenzhen Win-Win World News
- Day36 LeetCode
- DGIOT 30 million meters set pressure reading
- Is the write performance of raid5 faster than raid10?
- 基于sklearn的决策树应用实战
- raid5的写性能,是不的比raid10快一些?
- C# 获取PCI等设备的插槽位置信息
猜你喜欢
随机推荐
物联网时代下的网络整合推广外包精准化效果-深圳双赢世讯
2022-08-01 Advanced Network Engineering (24) STP Advanced Knowledge
同步锁synchronized追本溯源
组合数模板
QT下载清华源配置
【搜索引擎】Solr:提高批量索引的性能
StringUtils的具体操作
phpstudy开机自启
并查集模板
数据库公共字段自动填充
[机缘参悟-65]:《兵者,诡道也》-7-三十六计解读-败战计
.NET-7.WPF learning experience summary
【业务架构】价值链分析:提高客户价值和盈利能力
人工神经网络模型的特点,人工神经网络模型定义
快速输入当前日期与时间
Delphi实现的一个文件在线查询显示下载功能
[Learn Rust together | Advanced articles | RMQTT library] RMQTT message server - installation and cluster configuration
Synchronization lock synchronized traces the source
张驰课堂:老板会武术,谁也挡不住!六西格玛培训的魅力
NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单