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


Posted in Javascript onMay 28, 2020

本文实例为大家分享了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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 #Javascript
js实现选项卡效果
Mar 07 #Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 #Javascript
js实现简单放大镜效果
Mar 07 #Javascript
js实现文字头像的生成代码
Mar 07 #Javascript
You might like
javascript,php获取函数参数对象的代码
2011/02/03 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
js函数调用常用方法详解
2012/12/03 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
React 组件间的通信示例
2018/06/14 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python读写zip压缩文件的方法
2018/08/29 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
使用Python的turtle模块画国旗
2019/09/24 Python
用python写测试数据文件过程解析
2019/09/25 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
好的演讲稿开场白
2013/12/30 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
禁毒心得体会范文
2016/01/15 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript