qrcode.vue-next

v0.0.10

[qrcode.react](https://github.com/zpao/qrcode.react)的vue版本实现，最开始是[ant-design-vue](https://www.antdv.com)在QRCode组件中完成迁移，此仓库将其剥离出来，不是重复造轮子，而是满足在有使用二维码场景但组件库选型不是ant-design-vue的情况下，能够使用到[qrcode.react](https://github.com/zpao/qrcode.react)这一业界优秀实现，感谢qrcode.rea For more information about how to use this package see README

Latest version published 3 months ago

License: MIT

NPM

GitHub

Package Health Score

59 / 100

security
No known security issues
popularity
Limited
maintenance
Sustainable
community
Limited

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
0.0.10	\|	01/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (5)

GitHub Stars: 2
Forks: 0
Contributors: 1

Direct Usage Popularity

The npm package qrcode.vue-next receives a total of 5 downloads a week. As such, we scored qrcode.vue-next popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package qrcode.vue-next, we found that it has been starred 2 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Limited

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 1
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like qrcode.vue-next is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 0
Open PR: 0
Last Release: 3 months ago
Last Commit: 3 months ago

Further analysis of the maintenance status of qrcode.vue-next based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that qrcode.vue-next demonstrates a positive version release cadence with at least one new version released in the past 12 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 5 months
Dependencies: 1 Direct
Versions: 10
Install Size: 76.4 kB
Dist-tags: 1
# of Files: 20
Maintainers: 1
TS Typings: No

qrcode.vue-next has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

qrcode.vue-next

qrcode.react的vue版本实现，最开始是ant-design-vue在QRCode组件中完成迁移，此仓库将其剥离出来，不是重复造轮子，而是满足在有使用二维码场景但组件库选型不是ant-design-vue的情况下，能够使用到qrcode.react这一业界优秀实现，感谢qrcode.react与ant-design-vue为开源做出的贡献

在线预览

qrcode.vue-next

安装

npm install qrcode.vue-next

使用

qrcode.vue-next导出三个组件，支持以SVG或Canvas形式呈现。通常建议使用SVG，因为它更灵活，但Canvas可能更可取。

`Canvas`

import QRCode fom 'qrcode.vue-next';

<template>
  
</template>

`SVG`

import QRCode fom 'qrcode.vue-next';

<template>
  
</template>

`自定义`

如果不满足封装的QRCode提供的样式与功能，可以直接导出QRCodeCanvas或QRCodeSVG来使用，并传递所需props，然后就可以自由创造了。

import QRCode, { QRCodeCanvas, QRCodeSVG } from 'qrcode.vue-next';

const qrcodeProps = {
  value: 'https://vuejs.org',
  size: 134,
  level: 'M',
  bgColor: 'transparent',
  fgColor: 'rgba(0, 0, 0, 0.88)',
  imageSettings: {
    src: 'https://vuejs.org/images/logo.png',
    x: undefined,
    y: undefined,
    height: 40,
    width: 40,
    excavate: true
  }
}

<template>
  
  <br>
  
</template>

封装后的API，基于antd

参数	类型	默认值	说明
`bgColor`	`string`	`'transparent'`	二维码背景颜色
`bordered`	`boolean`	`true`	是否显示边框
`color`	`string`	`'#000000'`	二维码颜色
`errorLevel`	`'L'` \| `'M'` \| `'Q'` \| `'H'`	`'L'`	二维码纠错等级
`icon`	`string`	-	二维码中的图片地址
`iconSize`	`number`	`40`	二维码中图片的大小
`iconSettings`	`object`	`{x: undefined, y: undefined, excavate: true}`	二维码中图片的设置
`size`	`number`	`160`	二维码渲染大小
`status`	`'active'` \| `'expired'` \| `'loading'` \| `'scanned'`	`'active'`	二维码状态
`type`	`'canvas'` \| `'svg'`	`'canvas'`	渲染类型
`value`	`string`	-	扫描后的地址

事件

事件名	说明	回调参数
`change`	二维码绘制完成时触发	() => void
`refresh`	点击刷新按钮时触发	() => void

原本的API

prop	type	default value	note
`value`	`string`
`size`	`number`	`128`
`bgColor`	`string`	`"#FFFFFF"`	CSS color
`fgColor`	`string`	`"#000000"`	CSS color
`level`	`string` (`'L' 'M' 'Q' 'H'`)	`'L'`
`minVersion`	`number` (1-40)	`1`	QR Code versions are 1-40. The optimal (lowest) version is determined for the `value` provided, using this minimum as the lower bound.
`includeMargin`	`boolean`	`false`	DEPRECATED. This is being removed in favor of `marginSize`
`marginSize`	`number`	`0`	Specifies the number of modules to use for margin around the symbol. The QR Code specification requires `4`, however you may use other values. Values will be turned to integers with `Math.floor`. Overrides `includeMargin` default value when specified
`imageSettings`	`object`		See below

`imageSettings`

field	type	default value	note
`src`	`string`
`x`	`number`	none	Will attempt to center if not specified
`y`	`number`	none	Will attempt to center if not specified
`height`	`number`	10% of `size`
`width`	`number`	10% of `size`
`excavate`	`boolean`	`false`
`opacity`	`number`	1

自定义样式

qrcode.vue-next将通过任何附加的道具传递到底层DOM节点（＜svg＞或＜canvas＞）。这允许使用内联“style”或自定义“class”来自定义渲染。一个常见的用途是支持响应式布局。

注意: 为了在高密度显示器上渲染＜canvas＞中的二维码，我们缩放画布元素以包含适当数量的像素，然后使用内联样式进行缩小。我们将合并任何其他样式，自定义的height和width将覆盖我们原本的值。这允许缩放到百分比_but_如果缩放超过size，您将遇到模糊的图像。建议在渲染到＜canvas＞时传递适当的大小.

编码模式

qrcode.vue-next仅支持在单个段中对文本进行编码。所使用的编码库进行最少的检测，以确定所编码的文本是否可以遵循数字或字母数字模式的优化路径，从而允许对更多数据进行编码。否则，它将按照字节模式进行编码。此模式包括支持多字节Unicode字符（如汉字），但不支持优化的汉字编码模式。.

qrcode.vue-next dependencies

vue

FAQs

What is qrcode.vue-next?

[qrcode.react](https://github.com/zpao/qrcode.react)的vue版本实现，最开始是[ant-design-vue](https://www.antdv.com)在QRCode组件中完成迁移，... Visit Snyk Advisor to see a full health score report for qrcode.vue-next, including popularity, security, maintenance & community analysis.

Is qrcode.vue-next popular?

The npm package qrcode.vue-next receives a total of 5 weekly downloads. As such, qrcode.vue-next popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is qrcode.vue-next well maintained?

We found indications that qrcode.vue-next maintenance is sustainable demonstrating some project activity. We saw a total of 1 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is qrcode.vue-next safe to use?

The npm package qrcode.vue-next was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 2 May-2024, at 17:54 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (5)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

qrcode.vue-next

在线预览

安装

使用

Canvas

SVG

自定义

封装后的API，基于antd

事件

原本的API

imageSettings

自定义样式

编码模式

qrcode.vue-next dependencies

qrcode.vue-next development dependencies

FAQs

What is qrcode.vue-next?

Is qrcode.vue-next popular?

Is qrcode.vue-next well maintained?

Is qrcode.vue-next safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues

`Canvas`

`SVG`

`自定义`

`imageSettings`