二维码生成组件，支持自定义颜色、图标、大小等配置，还支持二维码状态显示和长按保存功能。基于 Canvas 绘制，支持动态更新和多种容错级别。

基本使用

直接引入即可使用，通过value配置二维码内容：

<un-qrcode value="https://uview.d3u.cn/"></un-qrcode>

自定义大小

通过size属性设置二维码尺寸：

<un-qrcode value="https://uview.d3u.cn/" :size="200"></un-qrcode>

自定义颜色

通过background、foreground、pdground属性自定义二维码颜色：

<un-qrcode 
    value="https://uview.d3u.cn/" 
    background="#f0f0f0"
    foreground="#3eaf7c"
    pdground="#ff6b6b">
</un-qrcode>

设置中心图标

通过icon和iconSize属性设置二维码中心的图标：

<un-qrcode 
    value="https://uview.d3u.cn/" 
    icon="https://uview.d3u.cn/common/logo.png"
    :iconSize="40">
</un-qrcode>

设置容错级别

通过level属性设置二维码的容错级别：

<un-qrcode value="https://uview.d3u.cn/" level="H"></un-qrcode>

容错级别说明：

• L：低容错级别，可恢复约7%的数据
• M：中等容错级别，可恢复约15%的数据
• Q：较高容错级别，可恢复约25%的数据
• H：高容错级别，可恢复约30%的数据

二维码状态

通过status属性设置二维码状态，支持显示过期、已扫描等状态：

<template>
    <un-qrcode 
        value="https://uview.d3u.cn/" 
        :status="qrStatus"
        :expiredText="'二维码已过期，请重新获取'"
        :scannedText="'二维码已被扫描'"
        :refreshText="'点击重新生成'"
        @refresh="handleRefresh">
    </un-qrcode>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const qrStatus = ref('') // 可选值：'expired' | 'scanned' | 'loading'

const handleRefresh = () => {
    // 处理刷新逻辑
    qrStatus.value = '';
}
</script>

动态更新二维码

可以通过监听 value 属性的变化来动态更新二维码内容：

<template>
    <view class="demo">
        <view class="input-group">
            <un-input v-model="qrContent" placeholder="请输入二维码内容"></un-input>
            <un-button type="primary" @click="updateQRCode">生成二维码</un-button>
        </view>
        
        <un-qrcode 
            :value="qrValue" 
            :status="qrStatus"
            @refresh="handleRefresh"
            @change="handleQRChange">
        </un-qrcode>
    </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const qrContent = ref('')
const qrValue = ref('https://uview.d3u.cn/')
const qrStatus = ref('')

const updateQRCode = () => {
    if (qrContent.value) {
        qrStatus.value = 'loading'
        // 模拟异步生成过程
        setTimeout(() => {
            qrValue.value = qrContent.value
            qrStatus.value = ''
        }, 500)
    }
}

const handleRefresh = () => {
    qrStatus.value = 'loading'
    setTimeout(() => {
        qrStatus.value = ''
    }, 500)
}

const handleQRChange = () => {
    console.log('二维码已更新')
}
</script>

<style>
.demo {
    padding: 20rpx;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-bottom: 40rpx;
}
</style>

自定义插槽

组件提供了多个插槽用于自定义状态显示：

<template>
    <view>
        <!-- 自定义加载状态 -->
        <un-qrcode value="https://uview.d3u.cn/" status="loading">
            <template #loading>
                <view class="custom-loading">正在生成二维码...</view>
            </template>
        </un-qrcode>
        
        <!-- 自定义过期状态 -->
        <un-qrcode value="https://uview.d3u.cn/" status="expired">
            <template #expired>
                <view class="custom-expired">
                    <text>二维码已过期</text>
                    <button @click="refreshQR">重新生成</button>
                </view>
            </template>
        </un-qrcode>
        
        <!-- 自定义已扫描状态 -->
        <un-qrcode value="https://uview.d3u.cn/" status="scanned">
            <template #scanned>
                <view class="custom-scanned">
                    <un-icon name="checkmark-circle-fill" size="24" color="success"></un-icon>
                    <text>已成功扫描</text>
                </view>
            </template>
        </un-qrcode>
    </view>
</template>

<script setup lang="uts">
const refreshQR = () => {
    // 处理刷新逻辑
    console.log('刷新二维码')
}
</script>

<style>
.custom-loading, .custom-expired, .custom-scanned {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
}

.custom-expired button {
    margin-top: 20rpx;
}

.custom-scanned {
    gap: 10rpx;
}
</style>

API

Props

参数	说明	类型	默认值
value	二维码内容	String	-
size	二维码尺寸	String | Number	140
background	背景色	String	#ffffff
foreground	前景色	String	#000000
pdground	定位角点颜色	String	#000000
level	容错级别	Enum	H
icon	二维码中心图标	String	-
iconSize	图标大小	Number	30
status	二维码状态	Enum	-
expiredText	过期提示文字	String	二维码已过期
scannedText	已扫码提示文字	String	二维码已扫描
refreshText	刷新按钮提示文字	String	刷新

Event

事件名	说明	类型
change	重新生成二维码时触发	Function
refresh	点击刷新按钮时触发	Function
error	生成或保存出错时触发	Function

Slot

插槽名	说明
loading	自定义加载状态显示
expired	自定义过期状态显示
scanned	自定义已扫描状态显示