feat: 新增订单列表交互
This commit is contained in:
duanshuwen
259
pages/order/components/Tabs/README.md
Normal file
259
pages/order/components/Tabs/README.md
Normal file
@@ -0,0 +1,259 @@
|
||||
# Tab 切换组件
|
||||
|
||||
一个功能完整的 Tab 切换组件，支持动画过渡、自定义内容和响应式设计。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✅ **多标签切换**：支持任意数量的标签页切换
|
||||
- ✅ **动画指示器**：选中状态下划线，支持平滑滑动动画
|
||||
- ✅ **自定义内容**：支持插槽自定义标签内容
|
||||
- ✅ **响应式设计**：适配不同屏幕尺寸
|
||||
- ✅ **动态宽度**：下划线宽度根据文字宽度动态调整
|
||||
- ✅ **事件支持**：完整的切换事件和双向绑定
|
||||
- ✅ **主题定制**：支持自定义指示器颜色
|
||||
- ✅ **uniapp 兼容**：使用 uniapp 内置组件开发
|
||||
|
||||
## 基础用法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tab
|
||||
:tabs="tabList"
|
||||
:defaultActive="0"
|
||||
@change="handleTabChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Tab from './components/Tab/index.vue'
|
||||
|
||||
const tabList = ref([
|
||||
{ label: '全部订单', value: 'all' },
|
||||
{ label: '服务工单', value: 'service' }
|
||||
])
|
||||
|
||||
const handleTabChange = ({ index, item }) => {
|
||||
console.log('切换到:', item.label)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 自定义标签内容
|
||||
|
||||
使用 `tab-item` 插槽可以完全自定义标签的显示内容：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tab :tabs="customTabs" @change="handleChange">
|
||||
<template #tab-item="{ item, index, isActive }">
|
||||
<view class="custom-tab">
|
||||
<image v-if="item.icon" :src="item.icon" class="tab-icon" />
|
||||
<text :class="{ 'active-text': isActive }">{{ item.label }}</text>
|
||||
<view v-if="item.badge" class="badge">{{ item.badge }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</Tab>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const customTabs = ref([
|
||||
{
|
||||
label: '待处理',
|
||||
value: 'pending',
|
||||
icon: '/static/pending.png',
|
||||
badge: '3'
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: 'completed',
|
||||
icon: '/static/completed.png'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
```
|
||||
|
||||
## 双向绑定
|
||||
|
||||
支持 `v-model` 双向绑定当前选中的索引：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tab v-model="activeIndex" :tabs="tabList" />
|
||||
<text>当前选中索引：{{ activeIndex }}</text>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const activeIndex = ref(0)
|
||||
const tabList = ref([
|
||||
{ label: '标签1', value: 'tab1' },
|
||||
{ label: '标签2', value: 'tab2' }
|
||||
])
|
||||
</script>
|
||||
```
|
||||
|
||||
## 动态标签
|
||||
|
||||
支持动态添加和删除标签：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tab :tabs="dynamicTabs" @change="handleChange" />
|
||||
<button @click="addTab">添加标签</button>
|
||||
<button @click="removeTab">删除标签</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const dynamicTabs = ref([
|
||||
{ label: '标签1', value: 'tab1' }
|
||||
])
|
||||
|
||||
const addTab = () => {
|
||||
const newIndex = dynamicTabs.value.length + 1
|
||||
dynamicTabs.value.push({
|
||||
label: `标签${newIndex}`,
|
||||
value: `tab${newIndex}`
|
||||
})
|
||||
}
|
||||
|
||||
const removeTab = () => {
|
||||
if (dynamicTabs.value.length > 1) {
|
||||
dynamicTabs.value.pop()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| tabs | Array | `[{label:'全部订单',value:'all'},{label:'服务工单',value:'service'}]` | 标签数据数组 |
|
||||
| defaultActive | Number | `0` | 默认选中的标签索引 |
|
||||
| indicatorColor | String | `#007AFF` | 指示器颜色 |
|
||||
| modelValue | Number | - | 当前选中索引（用于 v-model） |
|
||||
|
||||
### tabs 数组项结构
|
||||
|
||||
```typescript
|
||||
interface TabItem {
|
||||
label: string // 标签显示文本
|
||||
value: string // 标签值
|
||||
[key: string]: any // 其他自定义属性
|
||||
}
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|--------|------|------|
|
||||
| change | 标签切换时触发 | `{ index: number, item: TabItem }` |
|
||||
| update:modelValue | 用于 v-model 双向绑定 | `index: number` |
|
||||
|
||||
## Slots
|
||||
|
||||
| 插槽名 | 说明 | 作用域参数 |
|
||||
|--------|------|------------|
|
||||
| tab-item | 自定义标签内容 | `{ item: TabItem, index: number, isActive: boolean }` |
|
||||
|
||||
## 方法
|
||||
|
||||
通过 `ref` 可以调用组件的方法：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tab ref="tabRef" :tabs="tabList" />
|
||||
<button @click="switchToTab(1)">切换到第二个标签</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const tabRef = ref()
|
||||
|
||||
const switchToTab = (index) => {
|
||||
tabRef.value.setActiveIndex(index)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|--------|------|------|--------|
|
||||
| setActiveIndex | 设置当前选中的标签 | `index: number` | - |
|
||||
| getActiveIndex | 获取当前选中的标签索引 | - | `number` |
|
||||
| getActiveItem | 获取当前选中的标签项 | - | `TabItem` |
|
||||
|
||||
## 样式定制
|
||||
|
||||
### CSS 变量
|
||||
|
||||
组件支持通过 CSS 变量进行样式定制：
|
||||
|
||||
```scss
|
||||
.tab-container {
|
||||
--tab-bg-color: #fff; // 背景色
|
||||
--tab-text-color: #666; // 文字颜色
|
||||
--tab-active-color: #333; // 选中文字颜色
|
||||
--tab-indicator-color: #007AFF; // 指示器颜色
|
||||
--tab-border-color: #f0f0f0; // 边框颜色
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义主题
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tab
|
||||
:tabs="tabList"
|
||||
indicatorColor="#ff4d4f"
|
||||
class="custom-tab"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-tab {
|
||||
--tab-indicator-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-tab .tab-text-active {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 技术实现
|
||||
|
||||
- **框架**：Vue 3 组合式 API
|
||||
- **平台**：uniapp 跨平台开发
|
||||
- **动画**：CSS3 transition + transform
|
||||
- **响应式**：CSS media queries
|
||||
- **兼容性**：微信小程序、H5、App
|
||||
|
||||
## 设计规范
|
||||
|
||||
- 遵循微信小程序设计规范
|
||||
- 支持无障碍访问
|
||||
- 响应式设计，适配不同设备
|
||||
- 流畅的动画过渡效果
|
||||
- 一致的视觉风格
|
||||
|
||||
## 兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|----------|
|
||||
| 微信小程序 | ✅ 完全支持 |
|
||||
| H5 | ✅ 完全支持 |
|
||||
| App | ✅ 完全支持 |
|
||||
| 支付宝小程序 | ✅ 完全支持 |
|
||||
| 百度小程序 | ✅ 完全支持 |
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0
|
||||
- ✨ 初始版本发布
|
||||
- ✨ 支持基础标签切换功能
|
||||
- ✨ 支持动画指示器
|
||||
- ✨ 支持自定义标签内容
|
||||
- ✨ 支持响应式设计
|
||||
- ✨ 支持事件和双向绑定
|
||||
|
||||
## 备注
|
||||
|
||||
仅供学习、交流使用，请勿用于商业用途。
|
||||
Reference in New Issue
Block a user