# pluis-tab

**Repository Path**: fangjiayu/pluis-tab

## Basic Information

- **Project Name**: pluis-tab
- **Description**: pluis-tab
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-10
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pluis-tabs

统一的跨端 Tabs 组件（统一文件名：tab.vue，标签名：pluis-tab），支持父传子数据驱动、异步拦截、KeepAlive 缓存、吸顶、等宽展示、长标题省略、电梯定位、动画与手势滑动。

## 安装与引入
- 将 `uni_modules/pluis-tabs` 复制到项目的 `uni_modules` 目录
- 全局注册已在 `main.js` 完成：`pluis-tabs-pro` 可直接使用

## 基本使用
```vue
<pluis-tab
  v-model="active"
  :tabs="tabs"
  :animated="true"
  :swipeable="true"
  :ellipsis="false"
  :asyncTabs="[2]"
  :beforeChange="handleBeforeChange"
  KeepAlive
  showLoading
  loadingText="正在切换..."
  lineColor="#ee0a24"
  titleActiveColor="#ee0a24"
>
  <template v-slot:content="{tab}">
    <view>{{ tab.content }}</view>
  </template>
  <!-- 标题左/右插槽：可放图标、自定义节点 -->
  <template v-slot:title-left="{tab, index, active}">
    <text style="margin-right: 8rpx">★</text>
  </template>
  <template v-slot:title-right="{tab, index, active}">
    <text style="margin-left: 8rpx">✦</text>
  </template>
</pluis-tab>
```

## Tabs 数据结构
```js
[{ title: '首页', name: 0, content: '首页内容', async: false }]
```
- title：标题文本
- name：唯一标识（索引或字符串）
- content：示例内容（实际业务中可通过 slot 自定义）
- async：是否对该项启用异步拦截

## Props
- value / modelValue：当前激活 name（支持 v-model）
- color / lineColor：指示线颜色（默认红色）
- titleActiveColor / titleInactiveColor：标题选中/未选中颜色
- animated：内容横向滑动动画
- swipeable：手势左右滑动
- ellipsis：开启长标题省略
- ellipsisThreshold：超过该字数时省略（默认 6），并按字数计算 `max-width`
- visibleCount：导航等宽显示 N 个（其余横向滚动）
- sticky / stickyTop：导航吸顶；距离顶部（rpx/px）
- elevator / elevatorOffset：点击标题滚动定位到对应面板
- async / asyncTabs / beforeChange：异步拦截（函数返回布尔或 Promise）
- KeepAlive / keepAlive：缓存策略（true/索引/索引数组/名称）
- showLoading / loadingText：异步期间显示加载提示
- rootClass / navClass / titleClass / contentClass / lineClass：样式覆盖类名
- Slots：
  - content：面板内容插槽，作用域 { tab, index }
  - title-left：标题左侧插槽，作用域 { tab, index, active }
  - title-right：标题右侧插槽，作用域 { tab, index, active }

## 发布到插件市场（打包指引）
- 插件包：请用标准 zip 压缩，避免使用非标准压缩方式
- 使用说明：md 文件采用 utf-8 编码，图片建议上传到云存储后引用，避免本地路径导致显示异常
- 示例工程：提供可运行的完整 uni-app 示例；如需更新示例，请先在“云存储”中替换 apk 或静态资源后重新上传
- 许可证：默认 MIT，如需收费或闭源请在根目录添加 license.md 并在使用说明中说明
- 资源规范：尽量避免超大图片与非必要的二进制资源，提升审核与下载体验

## 事件
- change：激活项变化（返回激活 name）
- before-change（可选）：异步拦截事件，payload 含 `{ from, to, tab, proceed }`

## 示例
- 基本：异步 + 全局 KeepAlive + 动画
- 吸顶：sticky 启用
- 仅展示 4 个：visibleCount=4
- 超 6 字省略号：ellipsis=true, ellipsisThreshold=6（超出按 28rpx/字 + 64rpx padding 计算 max-width 并应用 ...）
- 电梯：elevator=true 点击标题滚动定位

## 设计要点
- 轨道与视口分离：内容滑动在 track 上，避免高度塌缩
- 指示线位置使用累计宽度计算，统一 px；rpx 通过窗口宽度换算
- 懒渲染 + 访问记忆，性能与体验兼顾