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 相关文章推荐
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php简单图像创建入门实例
2015/06/10 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
js查错流程归纳
2012/05/04 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
《油菜花开了》教学反思
2014/02/22 职场文书
房屋租赁意向书
2014/04/01 职场文书
活动总结报告格式
2014/05/09 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
导游词之岳阳楼
2019/09/25 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python