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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。