vue生成二维码插件,前端生成二维码

最近项目有两个点卡了两天,搞得周六还加班了。一个是生成二维码,之前一直在找可以生成二维码图片的api,就掉入这样的怪圈,殊不知可以通过vue现成插件生成,感谢后端同时提醒,这时候有个好伙伴的重要性就体现出来了。

1.npm install --save qrcodejs2  //首先安装插件

2.import QRCode from 'qrcodejs2'   //在要使用的页面引入

3.使用

ref标签


思考为什么要用nextTick?

这里如果直接使用this.$refs['qrCodeUrl']会报undefined错误,原因是this.openEWM=true即弹出二维码对话框,这时绑定ref的div还未渲染完成,故需要nextTick等待DOM更新,这里看下官网的解释:


接着往下看


创建二维码图片在弹出对话框之后执行,即数据更新在后

官网是最好的学习资料,这里仅记录个人学习点滴,如果有什么不足欢迎指正,评论区交流。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容