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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
浅谈JavaScript作用域
Dec 06 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
Yii配置文件用法详解
2014/12/04 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
js判断是否是手机页面
2017/03/17 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
详解vue-cli3使用
2018/08/14 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python fileinput模块使用介绍
2014/11/30 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
工程类专业自荐信范文
2014/03/09 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
全网非常详细的pytest配置文件
2022/07/15 Python