This article shares the specific code for Vue's mobile phone scanning QR code preview page for your reference. The specific content is as follows
background:The background management system built by vue-cli3 + ant-design-vue
need:Implement the function of scanning the QR code to preview the H5 page on your mobile phone
Use plugins:qrcode
step1：Install plug-ins
npm install qrcode --save
step2：Introducing plug-ins
Create a new file in the project
<template>
<div >
<div ></div>
<canvas ></canvas>
</div>
</template>
<script>
import QRCode from "qrcode";
export default {
props: {
url: {
type: String
}
},
data() {
return {
msg: "hello vue",
codes: ""
};
},
components: {
QRCode: QRCode
},
methods: {
useqrcode() {
var canvas = ("canvas");
(canvas, , function(error) {
if (error) (error);
});
}
},
mounted() {
();
}
};
</script>
<style lang="stylus" scoped>
#qrCode {
text-align: center;
}
</style>
step3：Introduced where this plugin is needed
For example:
<template>
<div>
<QRcode :url='url'/>
</div>
</template>
<script>
import QRcode from '../../'
export default {
components: {
QRcode
},
data() {
return {
url:'(The URL that needs to generate a QR code)'
}
}
}
</script>
For more articles, please click "Front-end component learning tutorial》Learn to read.
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
For more vue learning tutorials, please read the topic"Vue Practical Tutorial"
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.