三、核心组件体系
Wot Design Uni提供了70+个组件，覆盖了移动端开发的绝大部分场景。以下是最常用的核心组件分类。
3.1 基础组件
3.1.1 Button按钮组件
Button是用户交互中最基础的组件，Wot Design Uni提供了丰富的样式和状态。
<template>
<!-- 按钮类型 -->
<wd-button type="primary">主要按钮</wd-button>
<wd-button type="success">成功按钮</wd-button>
<wd-button type="error">错误按钮</wd-button>
<wd-button type="warning">警告按钮</wd-button>
<wd-button type="info">信息按钮</wd-button>
<wd-button type="default">默认按钮</wd-button>
<!-- 按钮尺寸 -->
<wd-button size="large">大号按钮</wd-button>
<wd-button size="medium">中等按钮</wd-button>
<wd-button size="small">小型按钮</wd-button>
<wd-button size="mini">迷你按钮</wd-button>
<!-- 按钮状态 -->
<wd-button disabled>禁用按钮</wd-button>
<wd-button loading>加载按钮</wd-button>
<!-- 块级按钮 -->
<wd-button block>块级按钮</wd-button>
<!-- 自定义样式 -->
<wd-button custom-class="my-button">自定义按钮</wd-button>
</template>
Button组件核心属性说明：
type：定义按钮的视觉类型
size：控制按钮尺寸
disabled：使按钮不可交互
loading：显示加载动画
block：使按钮宽度占满父容器
3.1.2 Cell单元格组件
Cell是列表展示的基础组件，适用于信息展示和页面导航。
<template>
<!-- 基础单元格 -->
<wd-cell title="单元格标题" value="单元格内容" />
<!-- 带图标的单元格 -->
<wd-cell title="单元格" icon="location" />
<!-- 带箭头的单元格（用于导航） -->
<wd-cell title="单元格" is-link />
<!-- 带描述的单元格 -->
<wd-cell title="单元格" label="描述信息" value="内容" />
<!-- 单元格组 -->
<wd-cell-group>
<wd-cell title="单元格1" value="内容1" />
<wd-cell title="单元格2" value="内容2" />
</wd-cell-group>
<!-- 自定义内容 -->
<wd-cell title="单元格" value="内容" is-link>
<view class="custom-content">自定义内容</view>
</wd-cell>
</template>
3.2 表单组件
3.2.1 Field输入框
Field是表单交互的核心组件，支持多种输入类型和验证功能。
<template>
<!-- 基础输入框 -->
<wd-field v-model="value" placeholder="请输入内容" />
<!-- 带标签的输入框 -->
<wd-field label="用户名" v-model="username" placeholder="请输入用户名" />
<!-- 密码输入框 -->
<wd-field
v-model="password"
label="密码"
type="password"
placeholder="请输入密码"
/>
<!-- 文本域 -->
<wd-field
v-model="desc"
type="textarea"
rows="3"
placeholder="请输入描述"
/>
<!-- 带错误提示 -->
<wd-field
v-model="phone"
label="手机号"
error-message="手机号格式不正确"
/>
</template>
Field组件的校验功能：
支持内置校验规则（required、email、phone等）
支持自定义校验规则
支持链式校验，让表单验证更加灵活
3.2.2 Form链式校验
Wot Design Uni 1.14.0版本增强了Form表单的校验能力，支持链式校验：
<template>
<wd-form :model="formData" :validate-trigger-chain="true">
<!-- 手机号校验通过后才显示验证码字段 -->
<wd-input
name="phone"
label="手机号"
v-model="formData.phone"
:rules="[{ required: true, message: '必填' },
{ pattern: /^1\d{10}$/, message: '格式错误' }]"
/>
<wd-input
name="code"
label="验证码"
v-model="formData.code"
:rules="[{ required: true, message: '必填' }]"
v-if="formData.phone.valid"
/>
</wd-form>
</template>
这种链式校验的设计让复杂的表单验证逻辑变得更加简洁优雅。
3.3 反馈组件
3.3.1 Dialog弹窗
<template>
<wd-dialog title="提示" v-model="show" @confirm="onConfirm">
<view>确定要执行此操作吗？</view>
</wd-dialog>
</template>
3.3.2 Toast提示
import { useToast } from 'wot-design-uni'
// 显示纯文本提示
useToast({ message: '操作成功', type: 'success' })
// 显示加载提示
useToast({ message: '加载中...', type: 'loading', duration: 0 })
3.4 虚拟列表组件（1.14.0新增）
Wot Design Uni 1.14.0版本新增了虚拟列表组件wd-virtual-list，专门用于处理大数据量列表的渲染：
<template>
<wd-virtual-list
:data="largeData"
:item-size="60"
@scroll="handleScroll"
>
<template #default="{ item }">
<div class="item">{
{ item.id }}. {
{ item.content }}</div>
</template>
</wd-virtual-list>
</template>
<script setup>
import { ref } from 'vue'
const largeData = ref(
Array.from({length: 10000}, (_, i) => ({
id: i+1,
content: `列表项 ${i+1}`
}))
)
</script>
虚拟列表是处理大数据量列表的核心技术，通过只渲染可视区域内的元素，可以大幅降低DOM节点数量，显著提升滚动性能和内存效率。
3.5 Tabs组件徽标功能
Wot Design Uni的Tabs组件支持徽标（Badge）功能，用于向用户传达未读消息数量、新功能提示等重要信息。
徽标功能的使用方式：
<template>
<!-- 基础小红点 -->
<wd-tabs :tabs="tabs" badge />
<!-- 数字徽标 -->
<wd-tabs :tabs="tabs" badge="5" />
<!-- 配置徽标样式 -->
<wd-tabs
:tabs="tabs"
:badge="{ isDot: true, color: '#f00' }"
/>
</template>
徽标配置选项：
isDot：是否显示为小红点
value：显示数值
max：数值最大值限制（如超过99显示"99+"）
color：自定义背景色
3.6 其他常用组件
四、主题定制
Wot Design Uni提供了灵活的主题定制能力，通过CSS变量可以轻松修改组件的外观。
4.1 全局主题变量覆盖
开发者可以通过修改CSS变量来定制应用的整体主题风格：
// uni.scss 或 App.vue中的style
/* 主题色变量 */
:root {
--wd-primary-color: #007bff;
--wd-success-color: #28a745;
--wd-warning-color: #ffc107;
--wd-error-color: #dc3545;
--wd-info-color: #17a2b8;
/* 背景色变量 */
--wd-bg-color: #ffffff;
--wd-bg-color-secondary: #f5f5f5;
/* 文字颜色变量 */
--wd-text-color: #333333;
--wd-text-color-secondary: #666666;
/* 圆角变量 */
--wd-border-radius: 8px;
/* 字体大小变量 */
--wd-font-size: 14px;
}
// 引入Wot Design Uni样式
@import 'wot-design-uni/styles/index.scss';
4.2 组件级样式定制
除了全局主题覆盖外，还可以针对单个组件进行样式定制：
<template>
<wd-button custom-class="my-button" expose-css-var>
自定义按钮
</wd-button>
</template>
<style scoped>
.my-button {
--wd-button-height: 50px;
border-radius: 25px;
}
</style>
expose-css-var属性可以让组件暴露内部的CSS变量，方便进行样式覆盖。
4.3 暗黑模式支持
Wot Design Uni从早期版本就开始支持暗黑模式。通过设置data-theme属性，可以轻松切换暗黑主题：
<script setup>
import { ref } from 'vue'
import { useDarkMode } from 'wot-design-uni'
const { isDark, toggleDark } = useDarkMode()
// 在根元素切换类名
watch(isDark, (val) => {
document.documentElement.classList.toggle('dark', val)
})
</script>
<style>
:root {
--wd-primary-color: #0081ff;
}
.dark {
--wd-bg-color: #1a1a1a;
--wd-text-color: #e0e0e0;
}
</style>
Wot Design Uni的暗黑模式支持基于CSS变量实现，通过切换根元素的类名来切换不同的变量值，从而实现全局主题切换。
来源：
https://bncne.cn
