Vue实现手机扫描二维码预览页面效果

本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码，供大家参考，具体内容如下

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统
需求：实现扫描二维码即可在手机预览H5页面功能

使用插件：qrcode

step1：安装插件

1. npm install qrcode --save

step2：引入插件

在项目中新建QRcode.vue文件

1. <template>
2. <div id="qrCode">
3. <div id="code"></div>
4. <canvas id="canvas"></canvas>
5. </div>
6. </template>
7. <script>
8. import QRCode from "qrcode";
9. export default {
10. props: {
11. url: {
12. type: String
13. }
14. },
15. data() {
16. return {
17. msg: "hello vue",
18. codes: ""
19. };
20. },
21.  
22. components: {
23. QRCode: QRCode
24. },
25.  
26. methods: {
27. useqrcode() {
28. var canvas = document.getElementById("canvas");
29. QRCode.toCanvas(canvas, this.url, function(error) {
30. if (error) console.error(error);
31. });
32. }
33. },
34.  
35. mounted() {
36. this.useqrcode();
37. }
38. };
39. </script>
40. <style lang="stylus" scoped>
41. #qrCode {
42. text-align: center;
43. }
44. </style>

step3：在需要使用该插件的地方引入

例如：

1. <template>
2. <div>
3. <QRcode :url='url'/>
4. </div>
5. </template>
6. <script>
7. import QRcode from '../../QRcode.vue'
8. export default {
9. components: {
10. QRcode
11. },
12. data() {
13. return {
14. url:'(需要生成二维码的网址)'
15. }
16. }
17. }
18. </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。