ZQ UI 组件库文档
ZQ UI 是一套基于 Vue 3 的跨平台移动端 UI 组件库，适用于 UniApp 项目，支持微信小程序、H5、Android、iOS、HarmonyOS。
特性
- 基于 Vue 3 Composition API（
<script setup>） - 支持主题切换（Light / Dark），通过 CSS 变量实现
- 支持国际化（zh-CN / zh-TW / en）
- 全平台兼容，尺寸使用 rpx
- 组件前缀
zq-，通过 easycom 自动注册
easycom 配置
在 pages.json 中已配置：
json
{
"easycom": {
"autoscan": true,
"custom": {
"^zq-(icon|navbar|tabbar)$": "@/components/zq-$1/zq-$1.vue",
"^zq-(.*)": "@/components/zq-ui/zq-$1/zq-$1.vue"
}
}
}无需手动 import，直接在模板中使用即可。
组件列表
基础组件
| 组件 | 说明 | 文档 |
|---|---|---|
| Button | 按钮 | button.md |
| Cell | 单元格 | cell.md |
| Tag | 标签 | tag.md |
| Badge | 徽标 | badge.md |
| Divider | 分割线 | divider.md |
| Loading | 加载 | loading.md |
| Empty | 空状态 | empty.md |
| Overlay | 遮罩层 | overlay.md |
表单组件
| 组件 | 说明 | 文档 |
|---|---|---|
| Input | 输入框 | input.md |
| Textarea | 文本域 | textarea.md |
| Switch | 开关 | switch.md |
| Checkbox | 复选框 | checkbox.md |
| Radio | 单选框 | radio.md |
| Stepper | 步进器 | stepper.md |
| Rate | 评分 | rate.md |
| Slider | 滑块 | slider.md |
| SearchBar | 搜索栏 | search-bar.md |
| Picker | 选择器 | picker.md |
| DatePicker | 日期选择器 | date-picker.md |
| TimePicker | 时间选择器 | time-picker.md |
| DatetimePicker | 日期时间选择器 | datetime-picker.md |
反馈组件
| 组件 | 说明 | 文档 |
|---|---|---|
| Popup | 弹出层 | popup.md |
| ActionSheet | 动作面板 | action-sheet.md |
| NoticeBar | 通知栏 | notice-bar.md |
展示组件
| 组件 | 说明 | 文档 |
|---|---|---|
| Card | 卡片 | card.md |
| Avatar | 头像 | avatar.md |
| Progress | 进度条 | progress.md |
| Skeleton | 骨架屏 | skeleton.md |
| Steps | 步骤条 | steps.md |
| Collapse | 折叠面板 | collapse.md |
| CountDown | 倒计时 | count-down.md |
导航组件
| 组件 | 说明 | 文档 |
|---|---|---|
| Tabs | 标签页 | tabs.md |
| Grid | 宫格 | grid.md |