您的位置：首页 > 编程技术 > js  >  深入了解Vue使用vue-qr生成二维码的方法

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

 更新时间：2021年12月9日 08:12  点击：980 作者：假我和尚

“二维码”的英文是“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>

结果：

在这里插入图片描述

总结

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

原文出处：https://blog.csdn.net/JWbonze/article/details/121682500

[!--infotagslink--]

相关文章

  • php生成二维码中文乱码问题解决方法

    最近做了个扫描二维码得到vcard的项目，遇到一个问题，有一部分生成完的二维码，用android系统手机扫描后得到的vcard中的中文姓名是乱码，经过比对发现，这部分vcard中ORG这个...2016-11-25

  • php二维码生成

    本文介绍两种使用 php 生成二维码的方法。 （1）利用google生成二维码的开放接口，代码如下： /** * google api 二维码生成【QRcode可以存储最多4296个字母数字类型的任意文本，具体可以查看二维码数据格式】 * @param strin...2015-10-21

  • Java生成随机姓名、性别和年龄的实现示例

    这篇文章主要介绍了Java生成随机姓名、性别和年龄的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-01

  • C#生成随机数功能示例

    这篇文章主要介绍了C#生成随机数功能,涉及C#数学运算与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下...2021-10-23

  • jQuery为动态生成的select元素添加事件的方法

    下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-09-01

  • PHP自动生成后台导航网址的最佳方法

    经常制作开发不同的网站的后台，写过很多种不同的后台导航写法。 最终积累了这种最写法，算是最好的吧...2013-09-29

  • php生成唯一数字id的方法汇总

    关于生成唯一数字ID的问题，是不是需要使用rand生成一个随机数，然后去数据库查询是否有这个数呢？感觉这样的话有点费时间，有没有其他方法呢？当然不是，其实有两种方法可以解决。 1. 如果你只用php而不用数据库的话，那时间戳+随...2015-11-24

  • js生成随机数的方法实例

    js生成随机数主要用到了内置的Math对象的random()方法。用法如：Math.random()。它返回的是一个 0 ~ 1 之间的随机数。有了这么一个方法，那生成任意随机数就好理解了。比如实际中我们可能会有如下的需要： （1）生成一个 0 - 1...2015-10-21

  • .NET C#利用ZXing生成、识别二维码/条形码

    ZXing是一个开放源码的，用Java实现的多种格式的1D/2D条码图像处理库，它包含了联系到其他语言的端口。这篇文章主要给大家介绍了.NET C#利用ZXing生成、识别二维码/条形码的方法，文中给出了详细的示例代码，有需要的朋友们可以参考借鉴。...2020-06-25

  • 微信开发生成带参数的二维码的讲解

    在微信公众号平台开发者那里，在“账号管理”那里，有一项功能是“生成带参数的二维码”，通过这儿生成的二维码，只要通过微信扫一扫之后，会把事件自动推送到微...2016-05-19

  • 浅谈js二维码扫码登录是什么原理

    这篇文章主要介绍了浅谈js二维码扫码登录是什么原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13

  • PHP验证码生成与验证例子

    验证码是一个现在WEB2.0中常见的一个功能了，像注册、登录又或者是留言页面，都需要注册码来验证当前操作者的合法性,我们会看到有些网站没有验证码，但那是更高级的验证了，...2016-11-25

  • PHP生成不同颜色、不同大小的tag标签函数

    复制代码 代码如下:function getTagStyle(){ $minFontSize=8; //最小字体大小,可根据需要自行更改 $maxFontSize=18; //最大字体大小,可根据需要自行更改 return 'font-size:'.($minFontSize+lcg_value()*(abs($maxFo...2013-10-04

  • C#利用QrCode.Net生成二维码（Qr码）的方法

    QrCode.Net是一个使用C#编写的用于生成二维码图片的类库，使用它可以非常方便的为WinForm、WebForm、WPF、Silverlight和Windows Phone 7应用程序提供二维码编码输出功能。可以将二维码文件导出为eps格式...2020-06-25

  • php中利用str_pad函数生成数字递增形式的产品编号

    解决办法：$str=”QB”.str_pad(($maxid[0]["max(id)"]+1),5,”0″,STR_PAD_LEFT ); 其中$maxid[0]["max(id)"]+1) 是利用max函数从数据库中找也ID最大的一个值， ID为主键，不会重复。 str_pad() 函数把字符串填充为指...2013-10-04

  • JS生成某个范围的随机数【四种情况详解】

    下面小编就为大家带来一篇JS生成某个范围的随机数【四种情况详解】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-04-22

  • C#生成Word文档代码示例

    这篇文章主要介绍了C#生成Word文档代码示例,本文直接给出代码实例,需要的朋友可以参考下...2020-06-25

  • 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    这篇文章主要介绍了基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-09-01

  • Vue组件文档生成工具库的方法

    本文主要介绍了Vue组件文档生成工具库的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-11