vue项目中使用qrcode生成二维码

最新推荐文章于 2024-11-18 14:59:17 发布

weixin_30624825

最新推荐文章于 2024-11-18 14:59:17 发布

阅读量344

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cq-0715/p/10483961.html

本文详细介绍了如何使用qrcode库在网页中生成二维码。通过npm安装qrcode后，在HTML中设置canvas元素，然后在JavaScript中调用QRCode.toCanvas方法，传入目标URL和回调函数即可实现二维码的生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装：npm install qrcode

2、html：

1 <template>
2 　　<div>
3 　　　　<div id="code"></div>
4 　　　　<canvas id="canvas"></canvas>
5 　　</div>
6 </template>

3、逻辑：

 1 import QRCode from 'qrcode
 2 export default {
 3   data () {
 4     return { codes: '' }
 5    },
 6     components: {
 7         QRCode
 8     },
 9     methods: {
10         useqrcode () {
11              var canvas = document.getElementById('canvas')
12              QRCode.toCanvas(canvas, 'http://www.baidu.com', function (error) {
13                   if (error) console.error(error)
14               console.log('success!')
15             })
16         }
17     },
18     mounted  () {
19         this.useqrcode()
20     }
21 }