深入了解Vue使用vue-qr生成二维码的方法

目录
  • npm下载
    • 步骤
      • （1）导入
      • （2）vue-qr参数
    • 示例
  • 总结

“二维码”的英文是“QR Code”，“QR”是“Quick Response”的缩写，反映出这种二维码具有“超高速识读”的特点。“Quick Response Code”也就是“快速响应码”。

npm下载

npm install vue-qr --save

下载成功：

步骤

（1）导入

import VueQr from 'vue-qr'

（2）vue-qr参数

  • text 二维码，即扫描二维码后跳转的页面
  • size 二维码大小
  • margin 二维码图像的外边距, 默认 20px
  • bgSrc 嵌入的背景图地址
  • logoSrc 嵌入至二维码中心的 LOGO 地址
  • logoScale 中间图的尺寸
  • dotScale 二维码的点的大小
  • colorDark 实点的颜色（注意：和colorLight一起设置才有效）
  • colorLight 空白的颜色（注意：和colorDark一起设置才有效）
  • autoColor 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true

示例

<template>
   <div>
      <vue-qr
         :text="imgUrl"
         :size="250"
         :logoSrc="logo"
         :logoScale="0.2">
      </vue-qr>
   </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
   name:'',
   components:{
      VueQr,
   },
   data() {
      return {
         imgUrl: 'https://baidu.com',
         logo: require('@/assets/tea_128.png'),
      }
   },
   methods:{
   },
}
</script>

结果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

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

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

  • Vue——前端生成二维码的示例

    Vue——前端生成二维码的示例

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm npm install --save qrcodejs2 import import QRCode from 'qrcodejs2' 使用 <div class="qrcode" ref="qrCodeUrl"></div>   <script

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

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

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

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

  • 通过vue方式实现二维码扫码功能

    通过vue方式实现二维码扫码功能

    提示 这个插件只能在https协议下才能访问,http协议不好使,最好用vue2,vue3容易报错!!!!! 描述 通过vue的方式,实现扫码功能 参考文档:vue-qrcode-reader去官网–>官方文档 效果展示 实现步骤: 步骤一(安装插件) npm install --save vue-qrcode-reader 步骤二(创建组件) 因为可能多个页面都会用到,所以弄成了组件 (1)在src下面的components创建qrcode.vue (2)代码实现 // qrcode.vue

  • vue实现二维码扫码功能(带样式)

    vue实现二维码扫码功能(带样式)

    需求: 利用vue实现二维码扫描: 插件: QRCodeReader: 插件下载 npm install --save vue-qrcode-reader 注意: 需要在https协议下才可以调用相机,实现扫码. 可以通过配置vue.config.js中的devServer:{https:true} 或参照前文章 前端使用Nuxt框架,配置本地https访问 配置本地证书 <template> <div> <p class="error">{{ er

  • Python基于QRCode实现生成二维码的方法【下载,安装,调用等】

    本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt

  • Python实现将文本生成二维码的方法示例

    本文实例讲述了Python实现将文本生成二维码的方法.分享给大家供大家参考,具体如下: #coding:utf-8 ''' Python生成二维码 v1.0 主要将文本生成二维码图片 测试一:将文本生成白底黑字的二维码图片 测试二:将文本生成带logo的二维码图片 ''' __author__ = 'Xue' import qrcode from PIL import Image import os #生成二维码图片 def make_qr(str,save): qr=qrcode.QRCode

  • ASP.NET生成二维码的方法总结

    本文实例总结了ASP.NET生成二维码的方法.分享给大家供大家参考,具体如下: 分享一例c#生成二维码的代码,直接引用ThoughtWorks.QRCode.dll 类生成二维码,有需要的朋友参考下. 方法1.直接引用ThoughtWorks.QRCode.dll 类,生成二维码. 代码示例: ThoughtWorks.QRCode.Codec.QRCodeEncoder encoder = new QRCodeEncoder(); encoder.QRCodeEncodeMode = QRCo

  • Symfony生成二维码的方法

    本文实例讲述了Symfony生成二维码的方法.分享给大家供大家参考,具体如下: 现在网上能搜到很多关于使用PHP生成二维码的例子,主要是两种方法: 第一种:google开放api,如下: $urlToEncode="http://blog.it985.com"; generateQRfromGoogle($urlToEncode); function generateQRfromGoogle($chl, $widhtHeight = '150', $EC_level = 'L', $m

  • Python及Django框架生成二维码的方法分析

    本文实例讲述了Python及Django框架生成二维码的方法.分享给大家供大家参考,具体如下: 一.包的安装和简单使用 1.1 用Python来生成二维码很简单,可以看 qrcode 这个包: pip install qrcode qrcode 依赖 Image 这个包: pip install Image 如果这个包安装有困难,可选纯Python的包来实现此功能,见下文. 1.2 安装后就可以使用了,这个程序带了一个 qr 命令: qr 'http://www.ziqiangxuetang.c

  • PHP基于phpqrcode类生成二维码的方法详解

    PHP基于phpqrcode类生成二维码的方法详解

    本文实例讲述了PHP基于phpqrcode类生成二维码的方法.分享给大家供大家参考,具体如下: 使用PHP语言生成二维码,还是挺有难度的,当然调用生成二维码图片的接口(比如:联图网http://www.liantu.com/的接口)除外,如果自己写代码生成,真的无从下手.然而,我们可以使用phpqrcode这个现成的类文件,PHP二维码生成类库,利用它可以轻松生成二维码. 前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/p

  • nodejs实现超简单生成二维码的方法

    nodejs实现超简单生成二维码的方法

    本文实例讲述了nodejs实现超简单生成二维码的方法.分享给大家供大家参考,具体如下: 一开始使用node-qrcode(https://github.com/soldair/node-qrcode),结果安装的时候需要安装python,且不支持python3.0以上,安装python2.0的时候又需要安装其他的环境,所以放弃了. 最后选择了一个小众的插件qr-image(https://github.com/alexeyten/qr-image) 前台页面如下 views/index.ejs

  • thinkphp3.2框架集成QRcode生成二维码的方法分析

    本文实例讲述了thinkphp3.2框架集成QRcode生成二维码的方法.分享给大家供大家参考,具体如下: 一.下载QRcode源代码 https://sourceforge.net/projects/phpqrcode/files/releases/ 使用phpqrcode必须开启GD2扩展,phpqrcode提供了一个png()方法,通过该方法,我们可以生成自已需要的二维码.该函数定义如下: public static function png( $text, $outfile = fals

  • PHP基于phpqrcode类生成二维码的方法示例详解

    HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址: http://phpqrcode.sourceforge.net/ 下载官网提供的类库后,只需要使用phpqrcode.php就可以生成二维码了,当然您的PHP环境必须开启支持GD2. phpqrcode.php提供了一个关键的png()方法,其中 参数$text表示生成二位的的信息文本: 参数$outfile表示是否输出二维码图片 文件,默认否: 参数$level表示容错率,

随机推荐