uView Next
4.0.105

外观

Qrcode 二维码

约 1107 字大约 4 分钟

2025-10-31

二维码生成组件，支持自定义颜色、图标、大小等配置，还支持二维码状态显示和长按保存功能。基于 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 | Number140
background背景色String#ffffff
foreground前景色String#000000
pdground定位角点颜色String#000000
level容错级别
Enum
H
icon二维码中心图标String-
iconSize图标大小Number30
status二维码状态
Enum
-
expiredText过期提示文字String二维码已过期
scannedText已扫码提示文字String二维码已扫描
refreshText刷新按钮提示文字String刷新

Event

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

Slot

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

Scss 变量

变量名默认值说明
$un-qrcode-mask-z-index10遮罩层 z-index 层级
$un-qrcode-mask-backgroundrgba(255, 255, 255, 0.9)遮罩层背景色
$un-qrcode-expired-message-font-size$text-base过期提示文字字体大小
$un-qrcode-expired-message-font-weight$font-bold过期提示文字字体粗细
$un-qrcode-expired-message-color$text-color过期提示文字颜色
$un-qrcode-expired-btn-margin-top5px刷新按钮与提示文字的间距

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档

Copyright © 2026 uView Next