vue:生成二维码 qrcode、vue-qr(二维码中间可带logo)

简介: vue:生成二维码 qrcode、vue-qr(二维码中间可带logo)

一、方法一 qrcode

qrcode - npm

1.1、安装

yarn add qrcode

1.2、页面引入

import QRCode from 'qrcode';

1.3、方法里边使用

1. getQRCodeUrl(){  
2. QRCode.toDataURL(
3. 'hello world',{
4. color: {
5. dark:"#010599FF",
6. light:"#FFBF60FF"
7.           }
8.         }
9.       )
10.       .then((url) => {
11. // 获取到url后即可在页面使用--二维码图片
12. console.log('url', url)
13.       })
14.       .catch((e) => {
15. console.log('e', e)
16.       });
17. }

二维码url:

1.4、options

名称 类型 默认值 说明
errorCorrectionLevel String M 错误处理级别。可选值:low, medium, quartile, high or L, M, Q, H
maskPattern Number 可选值:0, 1, 2, 3, 4, 5, 6, 7
margin Number 4
scale Number 4
width Number
color.dark String #000000ff
color.light String #ffffffff

二、方法二 vue-qr

vue-qr - npm

2.1、安装

yarn add vue-qr

2.2、页面引入

import VueQr from 'vue-qr'

2.3、组件增加vue-qr

components: { VueQr },

2.4、template使用

logoSrc中间logo

<vue-qr style="width:200px;height:200px;" logoSrc="https://image.dandelioncloud.cn//dist/img/NoSlightly.png" text="Hello world!" :size="200"></vue-qr>

2.5、options

Parameter Explanation
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

三、欢迎交流指正,关注我一起学习

相关文章
|
17天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
21天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
78 12
|
17天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
17天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
1月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
113 8
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
161 1
|
1月前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
85 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
116 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
70 1
vue学习第一章

热门文章

最新文章