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函数库-集合框架
Apr 27 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JQuery教学之性能优化
May 14 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
用vue设计一个日历表
Dec 03 Vue.js
微信小程序点击按钮动态切换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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现的爬虫功能代码
2017/06/24 Python
python视频按帧截取图片工具
2019/07/23 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
优秀教师先进事迹
2014/01/22 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
股份转让协议书范本
2015/01/27 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS