更新记录

1.0.1（2026-06-23） 下载此版本

• 各端统一导出 base64 图片展示，canvas 离屏绘制
• 新增 auto 参数，auto为false时手动调用 draw() 生成
• draw() / toTempFilePath() 生成成功后返回 base64 字符串
• 修复中文内容扫码乱码（UTF-8 编码）

1.0.0（2026-06-08） 下载此版本

初始版本

平台兼容性

uni-app(5.0)

zv-qrcode

二维码生成组件，兼容 Vue2 / Vue3、App、H5、微信小程序。

各端统一使用 base64 图片展示，canvas 仅作离屏绘制。

基础用法

<zv-qrcode content="https://zackboys.cn" />

手动生成

<zv-qrcode ref="qr" :auto="false" content="你好世界" />

<button @click="generate">生成二维码</button>

<script>
export default {
    methods: {
        async generate() {
            const base64 = await this.$refs.qr.draw()
            console.log(base64) // data:image/png;base64,...
        }
    }
}
</script>

自定义样式

<zv-qrcode
    content="https://zackboys.cn"
    :size="400"
    foreground="#000000"
    background="#ffffff"
    error-level="H"
    :margin="20"
    icon="/static/logo.png"
    :icon-size="20"
    icon-size-unit="percent"
    format="png"
    @complete="onComplete"
/>

属性

方法

• draw() / refresh()：生成二维码，返回 Promise\<base64 字符串>
• toTempFilePath()：同 draw()，返回 base64 字符串

事件

• complete：绘制完成，参数 { imageSrc: base64, tempPath: base64 }
• success：生成成功，参数为 base64 字符串
• error：生成或导出失败

实际效果请查看小程序或app

小程序示例	app示例