使用vue-qr插件生成二维码

这篇具有很好参考价值的文章主要介绍了使用vue-qr插件生成二维码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 使用 vue-qr 插件生成二维码并下载

vue-qr 官方 gitee 地址 https://www.npmjs.com/package/vue-qr

安装vue-qr插件

npm install vue-qr --save

引入vue-qr

// vue2
import vueQr from 'vue-qr'
// vue3
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

例子

<template>
  <div style="text-align: center;">
    <vue-qr 
      :text="qrUrl"
      :callback="qrCallBack" 
      :size="200"
      :margin="10"
      colorDark="green" 
      colorLight="white" 
      logoSrc="/favicon.ico"
      :logoScale="0.2"
      :dotScale="0.7">
    </vue-qr>
    <div style="text-align: center;">
      <button @click="downloadQrcode">下载二维码</button>
    </div>
  </div>
</template>
<script>
// 插件引入
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  name: 'App',
  components: { vueQr },
  data () {
    return {
      // 用于生成二维码的url
      qrUrl: 'https://www.npmjs.com/package/vue-qr',
      // 下载数据base64
      qrDownloadUrl: ''
    }
  },
  methods: {
    // 二维码刷新后调用
    qrCallBack(qrUrl) {
      this.qrDownloadUrl = qrUrl;
    },
    // 下载二维码
    downloadQrcode() {
      let a = document.createElement('a');
      a.download = '我的二维码';
      a.href = this.qrDownloadUrl;
      a.click();
    },
  }
}
</script>

效果图

使用vue-qr插件生成二维码,前端,vue,vue.js,前端,javascript

属性说明

这个表格是从vue-qr官方文档中粘贴过来的文章来源地址https://www.toymoban.com/news/detail-819950.html

属性 说明
text Contents to encode. 欲编码的内容
correctLevel Correct Level 0-3 容错级别 0-3
size Width as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距
margin Margin to add around the QR code, default 20px. 二维码图像的外边距, 默认 20px
colorDark Color of “true” blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色
colorLight Color of empty space, or “false” blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色
components Controls the appearances of parts in the QR code. Read section ComponentOptions to learn more. 阅读 ComponentOptions 了解更多信息。
bgSrc Background url to embed in the QR code. 欲嵌入的背景图地址
gifBgSrc Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor Background color 背景色
backgroundDimming Color mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc Logo url to embed at the center of generated QR code 嵌入至二维码中心的 LOGO 地址
logoScale Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to logoScale*(size-2*margin). Default is 0.2. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
logoMargin White margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor Logo background color, need set logo margin. Logo 背景色,需要设置 logo margin
logoCornerRadius Radius of the logo’s corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin If set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框
dotScale Value used to scale down the data dots’ size. (0 < scale < 1.0) default 1 数据区域点缩小比例,默认为1
autoColor If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
binarize If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold Threshold used to binarize the whole image. Default is 128. (0 < threshold < 255) 二值化处理的阈值
callback Data URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement If set to true, the generated QR will bind to a HTML element automatically. Default is true. 指定是否需要自动将生成的二维码绑定到HTML上, 默认是true

到了这里,关于使用vue-qr插件生成二维码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于uQRCode封装的Vue3二维码生成插件

    标题:基于uQRCode封装的Vue3二维码生成插件 摘要:本文介绍了一种基于uQRCode封装的Vue3二维码生成插件,可以在Javascript运行环境下生成二维码并返回图片地址。该插件适用于所有Javascript运行环境,并且支持微信小程序。本文将详细介绍该插件的使用方法,并给出一个基于Vu

    2024年02月05日
    浏览(61)
  • 详解Python生成二维码插件QrCode的使用

    二维码(QR Code)是一种常见的矩阵型条码,被广泛用于扫码支付、产品标识、活动推广等领域。Python提供了许多第三方库用于生成和解析二维码,其中最常用的是qrcode库。本文将介绍如何使用qrcode库来生成二维码,并提供相应的代码示例和详细说明。 在开始之前,我们需要

    2024年02月16日
    浏览(58)
  • vue批量生成二维码,打印生成的二维码,并批量下载生成的二维码,qrcode

    通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码 配置项: width 二维码宽度 height 二维码高度 errorCorrectionLevel 二维码纠错级别,指二维码被遮挡可以扫出结果的区域比例 color: 7. 打印生成的二

    2024年02月01日
    浏览(68)
  • 微信小程序插件 painter 生成海报、二维码

    GitHub 地址:https://github.com/Kujiale-Mobile/Painter 一、引入 将 components/painter 整个文件放到自己项目的 components 中;以组件的形式在页面的 json 文件中引入; 二、使用 3、注意 1、使用网络图片的时候需要在小程序后台配置 request、uploadFile、downloadFile 合法域名,否则线上版本不显示

    2024年02月15日
    浏览(47)
  • tki-qrcode插件二维码的生成

    1、全局安装tki-qrcode插件 2、查看下载插件后的版本信息 3、在页面中引入tki-qrcode 4、生成二维码整体代码 5、效果展示 此样式是平时黑色二维码样式,此为打过马赛克的二维码(不打马赛克博客无法展示图片,无奈(O~O) 注: 二维码中的内容可绑定链接和其他内容值 根据自

    2024年02月09日
    浏览(41)
  • 免费插件-illustrator-Ai插件-印刷功能-二维码生成

    本文介绍一款免费插件,加强illustrator使用人员工作效率,进行二维码生成。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/87890501,经过测试,这款插件在CC 2018之后都可以使用。 点击安装按钮即可以完成安装,如下图所示: 打开illustrator之后,通过窗口扩

    2024年02月13日
    浏览(42)
  • 基于Yolov5的二维码QR码识别

    目录 1.QR code介绍  1.1 通过split_train_val.py得到trainval.txt、val.txt、test.txt   1.2 通过voc_label.py得到适合yolov5训练需要的  2.基于yolov5的QR码检测 2.1配置 QR.yaml 2.2 修改yolov5s_QR.yaml 2.3 训练QR码检测模型 3.性能评价 4.QR码识别 4.1 转成onnx模型 4.2 基于opencv的QR码识别 4.3 基于zbar的QR码识

    2024年02月07日
    浏览(37)
  • vue生成二维码

    本次将教大家如何只通过vue前端快速的生成二维码 安装依赖 通过命令 安装二维码生成的依赖包到我们的项目中 引入 在自己需要构建生成的页面进行引入 构建通用方法 ps: 其中里面的参数 classId 为html的class标签名称 value 为需要将哪些数据进行构建生成二维码 通过该方法,我

    2024年02月12日
    浏览(39)
  • 前端vue项目:生成二维码,扫二维码跳转到相应页面

    Vue2项目 1、安装依赖::npm i arale-qrcode --save 2、引入:import AraleQRCode from \\\"arale-qrcode\\\"; 接下来让我们纯前端生成一个二维码                               【PS:亲测有效,大家可以放心使用 CV 大法哈  !】 HTML JS 需求中遇到的情况,也是百度了很久参考了很多大佬的文章

    2024年02月07日
    浏览(52)
  • vue,uniapp生成二维码

    话不多说直接开干 先是vue的 1,首先按照一下依赖 2,在需要使用的页面引入 3,使用 然后是uniapp // 1,新建一个js文件夹,把以下代码放进来,代码我放在最后了,js文件名为uqrcode.js 2,在使用的页面引用 3,在使用前需要有一个画布 4,使用 下面附上js代码

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包