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 相关文章推荐
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
早餐连锁店计划书
2014/01/08 职场文书
安全生产责任书
2014/03/12 职场文书
租房协议书
2014/04/10 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
合作意向书范本
2019/04/17 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server