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

从今天起,做一个简单的人,踏实务实。不沉溺幻想。不庸人自扰。要快乐,要开朗,要坚韧,要温暖,对人要真诚。要诚恳,要坦然,要慷慨,要宽容,要有平常心。

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

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

使用插件:qrcode

step1:安装插件

npm install qrcode --save

step2:引入插件

在项目中新建QRcode.vue文件

<template>
 <div id="qrCode">
 <div id="code"></div>
 <canvas id="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 = document.getElementById("canvas");
 QRCode.toCanvas(canvas, this.url, function(error) {
 if (error) console.error(error);
 });
 }
 },

 mounted() {
 this.useqrcode();
 }
};
</script>
<style lang="stylus" scoped>
#qrCode {
 text-align: center;
}
</style>

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

例如:

<template>
 <div>
 <QRcode :url='url'/>
 </div>
</template>
<script>
import QRcode from '../../QRcode.vue'
export default {
components: {
 QRcode
},
data() {
 return {
 url:'(需要生成二维码的网址)'
 }
}
}
</script>

更多文章可以点击《Vue.js前端组件学习好代码教程》学习阅读。

关于vue.js组件的好代码教程,请大家点击专题vue.js组件学习好代码教程进行学习。

更多vue学习好代码教程请阅读专题《vue实战好代码教程》

本文Vue如何实现手机扫描二维码预览页面效果到此结束。身边的朋友都在往前走,离我越来越远,我却一直站在原地不动。不进则退!我竟然才明白这个道理,原来拉开距离的并不是她们,而是我。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
vue如何实现列表固定列滚动

vue如何实现移动端拖拽悬浮按钮

vue如何实现伸缩菜单功能

Vue如何实现可复用轮播组件的方法

vue项目中canvas如何实现截图功能