Vue Responsive Tabs

🚀 一个高度可配置的 Vue 3 响应式标签页组件，支持桌面端和移动端不同布局、用户菜单和侧边栏集成。

✨ 特性

• 📱 完美响应式设计 - 桌面端和移动端完全不同的优化布局
• 🎨 完全可定制主题 - 支持自定义颜色、字体、动画等
• 🔄 流畅动画效果 - 丝滑的标签切换和菜单动画
• 👤 集成用户系统 - 用户信息显示、头像、下拉菜单
• 📋 移动端侧边栏 - 可配置的移动端侧边栏支持
• ⚡ TypeScript 支持 - 完整的类型定义和智能提示
• 🎯 丰富的事件 - 标签切换、用户操作等事件
• 🎛️ 灵活配置 - 布局、动画、响应式断点等全面配置

📦 安装

npm install vue-responsive-tabs

🚀 快速开始

基本使用

<template>
  <ConfigurableResponsiveTabs
    :tabs="tabs"
    :userInfo="userInfo"
    defaultActive="home"
    @tab-change="handleTabChange"
    @user-logout="handleLogout"
  />
</template>

<script setup>
import { ConfigurableResponsiveTabs } from 'vue-responsive-tabs';

const tabs = [
  { id: 'home', name: '主页' },
  { id: 'about', name: '关于' },
  { id: 'contact', name: '联系' },
];

const userInfo = {
  userName: '张三',
  email: '[email protected]',
  role: '管理员',
};

const handleTabChange = (tabId, tab) => {
  console.log('切换到标签:', tab.name);
};

const handleLogout = () => {
  console.log('用户退出');
};
</script>

自定义主题

<template>
  <ConfigurableResponsiveTabs
    :tabs="tabs"
    :theme="customTheme"
    :layout="customLayout"
  />
</template>

<script setup>
const customTheme = {
  primaryColor: '#3B82F6',
  activeIndicatorColor: '#10B981',
  backgroundColor: '#F8FAFC',
  activeTextColor: '#1E40AF',
};

const customLayout = {
  desktopHeight: '64px',
  marginBottom: '24px',
  showBorder: true,
};
</script>

📚 API 文档

Props

必需属性

| 属性 | 类型 | 描述 | |------|------|------| | tabs | TabItem[] | 标签页数组 |

可选属性

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | defaultActive | string | 第一个标签的ID | 默认激活的标签ID | | userInfo | UserInfo | undefined | 用户信息 | | userMenuItems | UserMenuItem[] | [logout] | 用户菜单项 | | sidebar | SidebarConfig | undefined | 侧边栏配置 | | theme | Partial<TabsTheme> | defaultTheme | 主题配置 | | layout | LayoutConfig | defaultLayout | 布局配置 | | responsive | ResponsiveConfig | defaultResponsive | 响应式配置 | | animation | AnimationConfig | defaultAnimation | 动画配置 | | showUserArea | boolean | true | 是否显示用户区域 | | className | string | undefined | 自定义类名 | | style | Record<string, any> | undefined | 自定义样式 |

类型定义

TabItem

interface TabItem {
  id: string;              // 唯一标识符
  name: string;            // 显示名称
  route?: string;          // 可选路由地址
  disabled?: boolean;      // 是否禁用
}

UserInfo

interface UserInfo {
  userName: string;        // 用户名
  email: string;           // 邮箱
  role?: string;          // 角色，默认"管理员"
  avatarUrl?: string;     // 头像地址
}

UserMenuItem

interface UserMenuItem {
  id: string;                           // 唯一标识符
  label: string;                        // 显示文本
  icon?: string;                        // 图标名称
  action?: () => void;                  // 点击回调
  route?: string;                       // 路由地址
  type?: 'default' | 'danger';          // 类型
  visible?: boolean;                    // 是否显示
}

TabsTheme

interface TabsTheme {
  primaryColor: string;                 // 主色调
  backgroundColor: string;              // 背景色
  activeTextColor: string;              // 激活文字颜色
  inactiveTextColor: string;            // 非激活文字颜色
  hoverTextColor: string;               // 悬浮文字颜色
  activeIndicatorColor: string;         // 激活指示器颜色
  borderColor: string;                  // 边框颜色
  userTextColor: string;                // 用户信息文字颜色
  secondaryTextColor: string;           // 次要文字颜色
  iconColor: string;                    // 图标颜色
  hoverBackgroundColor: string;         // 悬浮背景色
  boxShadow: string;                    // 阴影
}

ResponsiveConfig

interface ResponsiveConfig {
  breakpoint?: number;                  // 移动端断点，默认768px
  mobileTabsGap?: string;              // 移动端标签间距
  desktopPadding?: string;             // 桌面端内边距
  showUserMenuOnMobile?: boolean;      // 移动端是否显示用户菜单
}

LayoutConfig

interface LayoutConfig {
  desktopHeight?: string;              // 桌面端高度
  mobileHeaderHeight?: string;         // 移动端头部高度
  desktopLeftOffset?: string;          // 桌面端左侧偏移
  userAreaOffset?: string;             // 用户区域偏移
  marginBottom?: string;               // 底部边距
  zIndex?: number;                     // z-index层级
  showBorder?: boolean;                // 是否显示边框
}

SidebarConfig

interface SidebarConfig {
  component?: any;                     // 侧边栏组件
  enabled?: boolean;                   // 是否启用
  width?: string;                      // 宽度
}

事件

| 事件名 | 参数 | 描述 | |--------|------|------| | tab-change | (tabId: string, tab: TabItem) | 标签页切换时触发 | | user-menu-toggle | (visible: boolean) | 用户菜单显示/隐藏时触发 | | user-logout | () | 用户退出登录时触发 | | user-menu-item-click | (item: UserMenuItem) | 用户菜单项点击时触发 | | sidebar-toggle | (visible: boolean) | 侧边栏显示/隐藏时触发 | | mobile-title-click | () | 移动端标题点击时触发 |

🎨 主题定制

默认主题

const defaultTheme = {
  primaryColor: '#FB920C',
  backgroundColor: '#ffffff',
  activeTextColor: '#000000',
  inactiveTextColor: 'rgb(107, 114, 126)',
  hoverTextColor: 'rgb(55, 65, 81)',
  activeIndicatorColor: '#FB920C',
  borderColor: 'rgb(232, 234, 237)',
  userTextColor: 'rgb(76, 82, 89)',
  secondaryTextColor: 'rgb(107, 114, 126)',
  iconColor: 'rgb(76, 82, 89)',
  hoverBackgroundColor: 'rgba(251, 146, 12, 0.1)',
  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
};

自定义主题示例

<!-- 深色主题 -->
<ConfigurableResponsiveTabs
  :tabs="tabs"
  :theme="{
    primaryColor: '#3B82F6',
    backgroundColor: '#1F2937',
    activeTextColor: '#F9FAFB',
    inactiveTextColor: '#9CA3AF',
    borderColor: '#374151'
  }"
/>

<!-- 简约主题 -->
<ConfigurableResponsiveTabs
  :tabs="tabs"
  :theme="{
    primaryColor: '#10B981',
    activeIndicatorColor: '#10B981',
    backgroundColor: '#ffffff',
    hoverBackgroundColor: 'rgba(16, 185, 129, 0.1)'
  }"
/>

📖 更多示例

带侧边栏的移动端

<template>
  <ConfigurableResponsiveTabs
    :tabs="tabs"
    :sidebar="sidebarConfig"
    @sidebar-toggle="handleSidebarToggle"
  />
</template>

<script setup>
import MySidebar from './MySidebar.vue';

const sidebarConfig = {
  component: MySidebar,
  enabled: true,
  width: '280px',
};
</script>

自定义用户菜单

<template>
  <ConfigurableResponsiveTabs
    :tabs="tabs"
    :userInfo="userInfo"
    :userMenuItems="customMenuItems"
    @user-menu-item-click="handleMenuClick"
  />
</template>

<script setup>
const customMenuItems = [
  {
    id: 'profile',
    label: '个人资料',
    icon: 'user',
    route: '/profile',
  },
  {
    id: 'settings',
    label: '设置',
    icon: 'settings',
    action: () => openSettings(),
  },
  {
    id: 'logout',
    label: '退出',
    icon: 'poweroff',
    type: 'danger',
  },
];
</script>

响应式配置

<ConfigurableResponsiveTabs
  :tabs="tabs"
  :responsive="{
    breakpoint: 1024,
    mobileTabsGap: '32px',
    showUserMenuOnMobile: false
  }"
/>

动画配置

<ConfigurableResponsiveTabs
  :tabs="tabs"
  :animation="{
    tabTransition: '0.3s ease',
    menuTransition: '0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    enabled: true
  }"
/>

🎯 高级用法

程序化控制

<template>
  <ConfigurableResponsiveTabs
    ref="tabsRef"
    :tabs="tabs"
  />
  <button @click="switchToTab('contact')">跳转到联系页</button>
</template>

<script setup>
import { ref } from 'vue';

const tabsRef = ref();

const switchToTab = (tabId) => {
  tabsRef.value.setActiveTab(tabId);
};
</script>

集成路由

<template>
  <ConfigurableResponsiveTabs
    :tabs="tabs"
    @tab-change="handleTabChange"
  />
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const tabs = [
  { id: 'home', name: '首页', route: '/' },
  { id: 'about', name: '关于', route: '/about' },
];

const handleTabChange = (tabId, tab) => {
  if (tab.route) {
    router.push(tab.route);
  }
};
</script>

🛠️ 开发

# 克隆项目
git clone https://github.com/skillharbor/vue-responsive-tabs.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build:lib

# 类型检查
npm run type-check

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🔗 链接

• GitHub
• npm

Made with ❤️ by SkillHarbor