使用Vue生成二维码

147 阅读1分钟

今天就来给大家分享一下使用Vue生成二维码(可直接cv)

1.首先下载插件或者使用CDN链接来引入QRCode.js库

npm install qrcode
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script> 
<script src="https://cdn.staticfile.org/qrcode.js/1.4.4/qrcode.min.js"></script>

2.在项目中全局引入或者局部引入,我这里选择的是组件内局部引入

import QRCode from 'qrcode';

3.HTML模板中准备二维码容器

image.png 这里的id很关键,这个元素的id需要和代码中的document.getElementById('qrcode_down')匹配。

4.在methods创建生成二维码的方法

image.png

这里使用this.$nextTick是因为我需要在页面初始化的时候调用,所以写了等待DOM元素加载完成的方法

5.调用方法,创建二维码 上一步说我需要在页面初始化的时候调用方法,所以我在mounted中加载

image.png

这样我们就可以创建出对应的二维码了,感谢大佬们的观看!