Vue3 二维码样式

用于生成带有徽标和样式的 QR 码的 JavaScript 库。

此克隆副本https://qr-code-styling.com

如果您有问题/建议/注意事项/疑问,请打开问题或与我联系。让我们一起创建一个很酷的库。

示例

[](https://res.cloudinary.com/practicaldev/image/fetch/s--JRQWugk5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/ diadal/vue3-qr-code-styling/master/src/assets/facebook_example_new.png)[](https://res.cloudinary.com/practicaldev/image/fetch/s--GK_jtVfL--/ c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/diadal/vue3-qr-code-styling/master/src/assets/qr_code_example.png)[](https:// /res.cloudinary.com/practicaldev/image/fetch/s--KcRN-Ztr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/diadal/vue3-qr-code-样式/master/src/assets/telegram_example_new.png)

安装

npm install vue3-qr-code-styling

进入全屏模式 退出全屏模式

用途

<template>
  <div>
   <VueQr3
          :width="200"
          :height="200"
          data="https://diadal.com.ng"
          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
          :dotsOptions="{
            type: 'dots',
            color: '#26249a',
            gradient: {
              type: 'linear',
              rotation: 0,
              colorStops: [
                { offset: 0, color: '#26249a' },
                { offset: 1, color: '#26249a' },
              ],
            },
          }"
          :backgroundOptions="{ color: '#ffffff' }"
          image="https://diadal.com.ng/icons/favicon-96x96.png"
          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
          :cornersDotOptions="{ type: undefined, color: '#000000' }"
          fileExt="png"
          :download="true"
          myclass="my-qur"
          imgclass="img-qr"
          downloadButton="my-button"
          :downloadOptions="{ name: 'vqr', extension: 'png' }"
        >
    </VueQr3>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  defineAsyncComponent
} from 'vue'

export default defineComponent({
  name: 'VueQr3',
  components: {
    VueQr3: defineAsyncComponent(() =>
      Promise.resolve(import('vue3-qr-code-styling'))
    )
  },
  setup () {
    return {
    }
  }
})
</script>

<style lang="sass">
.my-qur
//   overflow-wrap: anywhere
</style>

进入全屏模式 退出全屏模式

API 文档

VQRCodeStyling 实例

new VQRCodeStyling(options) => VQRCodeStyling

参数

类型

描述

选项

目的

初始化对象

options结构

财产

类型

默认值

描述

宽度

数字

300

画布尺寸

高度

数字

300

画布尺寸

下载

布尔值

错误的

启用下载按钮

我的课

细绳

''

图像 DIV 类

类

细绳

''

图像类

下载按钮

细绳

''

下载按钮类

下载选项

目的

下载选项名称和扩展名

数据

细绳

日期将被编码到二维码

图片

细绳

图像将被复制到二维码的中心

利润

数字

0

画布周围的边距

qr选项

目的

选项将传递给qrcode-generatorlib

图像选项

目的

具体图片选项,详情见下文

点选项

目的

点样式选项

角正方形选项

目的

角落中的方形样式选项

角点选项助手

目的

角落样式选项中的点

背景选项

目的

QR 背景样式选项

options.qrOptions结构

财产

类型

默认值

类型编号

号码 (0 - 40)

0

模式

字符串 ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')

errorCorrectionLevel

字符串 ('L' 'M' 'Q' 'H')

'Q'

options.imageOptions结构

财产

类型

默认值

描述

隐藏背景点

布尔值

true

隐藏图像覆盖的所有点

图片尺寸

数字

0.4

图像大小的系数。不建议使用超过 0.5。越低越好

利润

数字

0

以 px 为单位的图像边距

跨域

字符串('anonymous' 'use-credentials')

如果您想从其他来源下载二维码,请设置“匿名”。

options.dotsOptions结构

财产

类型

默认值

描述

颜色

细绳

'#000'

QR 点的颜色

坡度

目的

QR 点的渐变

类型

字符串 ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded')

'square'

QR 点的样式

options.backgroundOptions结构

财产

类型

默认值

颜色

细绳

'#fff'

坡度

目的

options.cornersSquareOptions结构

财产

类型

默认值

描述

颜色

细绳

角落广场的颜色

坡度

目的

角广场的渐变

类型

字符串 ('dot' 'square' 'extra-rounded')

角广场的风格

options.cornersDotOptions结构

财产

类型

默认值

描述

颜色

细绳

角点颜色

坡度

目的

角点渐变

类型

字符串 ('dot' 'square')

角点样式

渐变结构

options.dotsOptions.gradient

options.backgroundOptions.gradient

options.cornersSquareOptions.gradient

options.cornersDotOptions.gradient

财产

类型

默认值

描述

类型

字符串 ('linear' 'radial')

“线性”

梯度扩散的类型

回转

数字

0

以弧度表示的梯度旋转(Math.PI u003du003du003d 180 度)

色标

对象数组

渐变色。示例[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]

渐变颜色停止结构

options.dotsOptions.gradient.colorStops[]

options.backgroundOptions.gradient.colorStops[]

options.cornersSquareOptions.gradient.colorStops[]

options.cornersDotOptions.gradient.colorStops[]

财产

类型

默认值

描述

抵消

号码 (0 - 1)

颜色在渐变范围内的位置

颜色

细绳

渐变范围内的停止颜色

VQRCodeStyling 方法

VQRCodeStyling.append(container) => void

参数

类型

描述

容器

DOM 元素

此容器将用于附加二维码

VQRCodeStyling.update(options) => void

参数

类型

描述

选项

目的

与初始化相同的选项

VQRCodeStyling.download(downloadOptions) => void

参数

类型

描述

下载选项

目的

带有扩展名和文件名的选项(非必需)

downloadOptions结构

财产

类型

默认值

描述

姓名

细绳

'qr'

下载文件的名称

扩大

字符串 ('png' 'jpeg' 'webp')

'png'

文件扩展名

如果有任何问题检查

你也可以给我买咖啡@Patreon

执照

麻省理工学院许可证。版权所有 (c) 2021 Diadal Nig