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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中实现动态生成二维码的方法

    最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

  • 在Vue中用canvas实现二维码和图片合成海报的方法

    在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/qr

  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天做个了项.就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法. 问题 机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图 然后是正常情况下.当我们开始扫码的时,应该是这个样子 这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片.那么如何解决呢,请看下面. 解决方案 解决方案其实有两种. 使用 qrcodeJs 就

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

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

  • Android studio 实现手机扫描二维码功能

    安卓手机版本在6.0以后需要动态获取相机权限 1.获取相机权限 <!-- 获取手机相机的权限 --> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.FLASHLIGHT" /> 2.添加依赖 implementation 'cn.yipianfengye.a

  • Vue移动端实现调用相机扫描二维码或条形码的全过程

    Vue移动端实现调用相机扫描二维码或条形码的全过程

    目录 一.开发前的准备 二.实现效果图 三.具体操作实现 总结 一.开发前的准备 实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能(详见 概述 | 微信开放文档),或者支付宝 H5 开放的API(详见 支付宝H5开放文档). 但是这两者都会比较麻烦且有一定的局限性,微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作.支付宝在内置 App 内可以同时识别二维码和条形码,但外部调用的 API 无法一次性同时识别,只能分开识别. 我这里就提供一个直接使用的开源

  • php 解决扫描二维码下载跳转问题

    php 解决扫描二维码下载跳转问题 首先我们指定一个url,比如 http://it.lovepet.vip 用这个地址生成二维码,二维码的生成方式有很多种,到网上搜搜就知道. 我们可以新建一个index.php放在改网站目录下.编辑index.php加入 $agent=strtolower($agent=strtolower(_SERVER['HTTP_USER_AGENT']); $iphone=(strpos(iphone=(strpos($agent, 'iphone')) ? true

  • springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

    1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有

  • Android利用ZXing扫描二维码的实例代码解析

    Android利用ZXing扫描二维码的实例代码解析

    相关阅读: Android开发框架之自定义ZXing二维码扫描界面并解决取景框拉伸问题 此项目源码地址:请点击这里 看一下zxing的项目结构,我这里直接拿过来用的 看一下扫码的activity: package com.fanyafeng.barcode.activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle

  • 扫描二维码控件的封装iOS实现

    扫描二维码控件的封装iOS实现

    扫描二维码效果 源码:https://github.com/YouXianMing/Animations // // QRCodeView.h // QRCode // // Created by YouXianMing on 16/7/7. // Copyright © 2016年 XianMing You. All rights reserved. // #import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h>

  • iOS 原生实现扫描二维码和条形码功能限制扫描区域

    现在苹果iOS系统已经原生支持了二维码扫描的功能,使用原生来扫描需要导入AVFoundation. 扫描准备 一.获取摄像设备: device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo) 二.创建输入流 do { try input = AVCaptureDeviceInput(device: device) } catch let e as NSError { print(e.localizedDescrip

  • iOS中使用ZBar扫描二维码自定义扫描界面功能

    之前在Android中使用过ZXing识别二维码,ZXing也有对应的iOS版本,经过了解,ZBar也是一个常用的二维码识别软件,并分别提供了iOS和Android的SDK可供使用,最终我选择了ZBar进行二维码识别,它的注释清晰,便于使用. ZBar为我们提供了两种使用方式,一种是直接调用ZBar提供的ZBarReaderViewController打开一个扫描界面,另一种方式是使用ZBar提供的可以嵌在其他视图中的ZBarReaderView,实际项目中我们更可能会使用第二种方式,这可以让我

随机推荐