更新记录

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

初始版本

平台兼容性

uni-app(5.0)

zv-qrcode

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

基础用法

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

自定义样式

<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"
/>

导出图片

<zv-qrcode ref="qr" content="hello" />

<script>
export default {
    methods: {
        async save() {
            const path = await this.$refs.qr.toTempFilePath()
            console.log(path)
        }
    }
}
</script>

属性

App 端绘制完成后自动隐藏 canvas，用 base64 图片展示，避免原生 canvas 层级遮挡问题。

方法

• draw() / refresh()：重新绘制
• toTempFilePath()：导出临时图片路径

事件

• complete：绘制完成
• success：导出成功，参数为临时路径
• error：生成或导出失败