QrCode 二维码

QrCode 二维码 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { QrCode } from "@/components/page/qr-code";

const demoProps = { text: "https://idx-web.local", width: 160 };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <QrCode v-bind="demoProps"></QrCode>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { QrCode } from "@/components/page/qr-code";

Props

参数	说明	类型	默认值	必填
tag	二维码类型，默认 canvas	string	"canvas"	否
text	二维码内容	string | Recordable[]	""	否
options	二维码配置	QRCodeRenderersOptions	(): QRCodeRenderersOptions => ({})	否
width	二维码宽度，默认 200	number	200	否
logo	二维码logo	QrCodeLogo | string	""	否
disabled	二维码是否禁用，默认 false	boolean	false	否
disabledText	二维码禁用文本	string	""	否

Events

事件名	说明	回调参数
done	二维码生成完成事件，返回二维码图片地址	url: string
click	二维码点击事件，无参数	-
disabledClick	二维码禁用点击事件	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
QrCode	导出 QrCode 供业务侧复用。	useInstall(index)

Types

QrCodeProps

导出 QrCodeProps 供业务侧复用。

字段	说明	类型	默认值	必填
tag	二维码类型，默认 canvas	string	-	否
text	二维码内容	string | Recordable[]	-	否
options	二维码配置	QRCodeRenderersOptions	-	否
width	二维码宽度，默认 200	number	-	否
logo	二维码logo	QrCodeLogo | string	-	否
disabled	二维码是否禁用，默认 false	boolean	-	否
disabledText	二维码禁用文本	string	-	否

QrCodeLogo

导出 QrCodeLogo 供业务侧复用。

字段	说明	类型	默认值	必填
src	二维码 logo 图片	string	-	否
logoSize	二维码 logo 大小，默认 0.15	number	-	否
bgColor	二维码 logo 背景颜色，默认 #ffffff	string	-	否
borderRadius	二维码 logo 边框圆角，默认 8	number	-	否
borderSize	二维码 logo 边框大小，默认 0.05	number	-	否
logoRadius	二维码 logo 边框圆角，默认 0	number	-	否
crossOrigin	二维码 logo 跨域	string	-	否

QrCodeEmits

导出 QrCodeEmits 供业务侧复用。

字段	说明	类型	默认值	必填
done	二维码生成完成事件，返回二维码图片地址	[url: string]	-	是
click	二维码点击事件，无参数	[]	-	是
disabledClick	二维码禁用点击事件	[]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。