二维码生成器组件

概述

QRCodeGenerator 是一个二维码生成组件，支持多种数据源、自定义样式、Logo 叠加、下载和复制功能。

组件路径：web/apps/web-ele/src/components/zq-form/qrcode-generator/

组件名称：QRCodeGenerator

功能特性

多种数据源：静态值、字段绑定、公式模板
多种二维码类型：文本、URL、电话、短信、邮件
自定义样式：前景色、背景色、尺寸、边距
Logo 叠加支持
容错级别配置
下载和复制功能

Props

属性	类型	默认值	说明
`modelValue`	`string`	-	静态内容值
`dataSource`	`'static' \| 'field' \| 'formula'`	`'static'`	数据源类型
`boundField`	`string`	-	绑定字段名（field 模式）
`formula`	`string`	-	公式模板（formula 模式）
`formData`	`Record<string, any>`	-	表单数据
`qrcodeType`	`'text' \| 'url' \| 'tel' \| 'sms' \| 'email'`	`'text'`	二维码类型
`size`	`number`	`200`	二维码尺寸（px）
`errorCorrectionLevel`	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`	容错级别
`foregroundColor`	`string`	`'#000000'`	前景色
`backgroundColor`	`string`	`'#FFFFFF'`	背景色
`logoUrl`	`string`	-	Logo 图片 URL
`logoSize`	`number`	`40`	Logo 尺寸（px）
`margin`	`number`	`2`	边距
`showContent`	`boolean`	`false`	是否显示内容文本
`enableDownload`	`boolean`	`false`	是否启用下载
`enableCopy`	`boolean`	`false`	是否启用复制
`downloadFilename`	`string`	`'qrcode'`	下载文件名
`disabled`	`boolean`	`false`	是否禁用
`placeholder`	`string`	-	空状态提示文本

容错级别说明

级别	说明	可恢复数据
`L`	低	约 7%
`M`	中	约 15%
`Q`	较高	约 25%
`H`	高	约 30%

Events

事件	参数	说明
`generated`	`string`	二维码生成完成，返回内容
`downloaded`	-	下载完成
`copied`	-	复制完成

使用示例

静态内容

vue

<template>
  <QRCodeGenerator
    v-model="content"
    :size="200"
    :enable-download="true"
  />
</template>

<script setup>
import { ref } from 'vue';

const content = ref('https://example.com');
</script>

绑定表单字段

vue

<template>
  <QRCodeGenerator
    data-source="field"
    bound-field="product_code"
    :form-data="formData"
    :size="150"
  />
</template>

公式模板

vue

<template>
  <QRCodeGenerator
    data-source="formula"
    formula="https://example.com/product/{{product_id}}?code={{product_code}}"
    :form-data="formData"
    qrcode-type="url"
  />
</template>

带 Logo 的二维码

vue

<template>
  <QRCodeGenerator
    v-model="content"
    :logo-url="logoUrl"
    :logo-size="50"
    error-correction-level="H"
  />
</template>

自定义样式

vue

<template>
  <QRCodeGenerator
    v-model="content"
    :size="250"
    foreground-color="#1890ff"
    background-color="#f0f0f0"
    :margin="4"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 qrcode-generator 类型的表单项使用：

json

{
  "type": "qrcode-generator",
  "field": "qrcode",
  "label": "产品二维码",
  "props": {
    "dataSource": "field",
    "boundField": "product_code",
    "qrcodeType": "text",
    "size": 200,
    "errorCorrectionLevel": "M",
    "enableDownload": true,
    "enableCopy": true
  }
}

典型应用场景

产品标签：生成产品信息二维码
名片生成：生成联系方式二维码
链接分享：生成 URL 二维码
支付码：生成支付链接二维码

二维码生成器组件 ​

概述 ​

功能特性 ​

Props ​

容错级别说明 ​

Events ​

使用示例 ​

静态内容 ​

绑定表单字段 ​

公式模板 ​

带 Logo 的二维码 ​

自定义样式 ​

与表单设计器集成 ​

典型应用场景 ​