zoujing/YGChatCS

Fork 0

Files

duanshuwen 4cd0f59966 feat: 新增订单列表交互

2025-07-27 18:08:06 +08:00

5.8 KiB

Raw Blame History

Tab 切换组件

一个功能完整的 Tab 切换组件，支持动画过渡、自定义内容和响应式设计。

功能特性

✅ 多标签切换：支持任意数量的标签页切换
✅ 动画指示器：选中状态下划线，支持平滑滑动动画
✅ 自定义内容：支持插槽自定义标签内容
✅ 响应式设计：适配不同屏幕尺寸
✅ 动态宽度：下划线宽度根据文字宽度动态调整
✅ 事件支持：完整的切换事件和双向绑定
✅ 主题定制：支持自定义指示器颜色
✅ uniapp 兼容：使用 uniapp 内置组件开发

基础用法

<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 插槽可以完全自定义标签的显示内容：

<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 双向绑定当前选中的索引：

<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>

动态标签

支持动态添加和删除标签：

<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 数组项结构

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 可以调用组件的方法：

<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 变量进行样式定制：

.tab-container {
  --tab-bg-color: #fff;              // 背景色
  --tab-text-color: #666;            // 文字颜色
  --tab-active-color: #333;          // 选中文字颜色
  --tab-indicator-color: #007AFF;    // 指示器颜色
  --tab-border-color: #f0f0f0;       // 边框颜色
}

自定义主题

<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

✨ 初始版本发布
✨ 支持基础标签切换功能
✨ 支持动画指示器
✨ 支持自定义标签内容
✨ 支持响应式设计
✨ 支持事件和双向绑定

备注

仅供学习、交流使用，请勿用于商业用途。

5.8 KiB Raw Blame History Unescape Escape