QRCode 二维码

高性能全端二维码生成组件，支持离屏 Canvas 超清渲染、中间 Logo 头像防覆盖、长按识别、全屏大图预览与一键保存到本地相册。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <mu-qrcode value="https://muzhiyu.ui" :size="180" text="扫描打开网页" />
</template>

---

2. 中间 Logo 头像 (Logo Insertion)

通过 logo 传入头像图片 URL，logo-size 控制头像大小，组件内置防覆盖白底护盾。

<template>
  <mu-qrcode
    value="https://muzhiyu.ui/brand"
    :size="180"
    logo="/static/logo.png"
    :logo-size="40"
  />
</template>

---

3. 自定义高彩主题色 (Custom Color)

配置 foreground 前景色与 background 背景色。

<template>
  <mu-qrcode
    value="https://muzhiyu.ui"
    foreground="#8B5CF6"
    background="#F5F3FF"
  />
</template>

---

4. 下载保存与放大预览 (Download & Preview)

设置 show-download 开启保存按钮，preview 开启点击全屏放大预览。

<template>
  <mu-qrcode
    value="https://muzhiyu.ui"
    show-download
    :preview="true"
    @download="onDownload"
  />
</template>

<script setup>
function onDownload(res) {
  console.log('图片已保存到本地:', res.filePath)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
value	待生成的文本、数据或 URL 链接	String	-	''
size	二维码尺寸大小 (px)	Number | String	-	180
foreground	前景色 / 二维码码块颜色	String	-	'#000000'
background	背景色	String	-	'#FFFFFF'
padding	内边距 (px)	Number	-	12
logo	中间嵌入的 Logo 图片地址	String	-	''
logoSize	Logo 尺寸大小 (px)	Number	-	40
text	底部说明文本	String	-	''
preview	点击是否开启大图全屏预览	Boolean	true | false	true
showDownload	是否显示“保存二维码”下载按钮	Boolean	true | false	false

---

事件说明 (Events)

事件名	说明	回调参数
success	二维码渲染成功时触发	-
fail	二维码渲染失败时触发	(error: any)
download	成功保存图片到相册后触发	(res: { filePath: string })
click	点击二维码区域时触发	(event: MouseEvent)

---

实例方法 (Expose Methods)

方法名	说明
renderQRCode()	重新渲染生成二维码
saveImage()	快捷导出/保存二维码到相册
openPreview()	唤起全屏大图预览
previewShow	预览弹层控制（响应式变量）