Vue Clean Tabs

🚀 一个轻量级、高度可配置的 Vue 3 简洁标签页组件，专注于简洁设计和灵活定制。

🆕 v1.1.0 更新

• ✨ 优化样式结构 - 简化CSS类名，提升可维护性
• 🎯 改进激活指示器 - 使用CSS伪元素实现更流畅的底部线条
• 📱 增强移动端适配 - 优化移动端样式和响应式体验
• 🚀 性能优化 - 减少内联样式，提升渲染性能

✨ 特性

• 🪶 轻量级设计 - 极简的 API 和最小的包体积
• 🎨 高度可定制 - 丰富的样式配置和主题选项
• 📱 响应式支持 - 完美适配移动端和桌面端
• 🎯 多种指示器 - 线条、下划线、圆点、药丸等样式
• 🔧 灵活配置 - 尺寸、动画、布局等全面配置
• ⚡ TypeScript 支持 - 完整的类型定义
• 🎪 丰富功能 - 图标、禁用、滚动、居中等功能
• 🎭 无障碍访问 - 支持键盘导航和屏幕阅读器

📦 安装

npm install vue-clean-tabs

🚀 快速开始

基本使用

<template>
  <ConfigurableSimpleTabs
    :tabs="tabs"
    defaultActive="home"
    @tab-change="handleTabChange"
  />
</template>

<script setup>
import { ConfigurableSimpleTabs } from "vue-clean-tabs";

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

const handleTabChange = (tabId, tab) => {
  console.log("切换到:", tab.name);
};
</script>

带图标的标签页

<template>
  <ConfigurableSimpleTabs :tabs="iconTabs" />
</template>

<script setup>
const iconTabs = [
  {
    id: "home",
    name: "首页",
    icon: "<svg>...</svg>", // SVG 图标
  },
  {
    id: "user",
    name: "用户",
    icon: "<svg>...</svg>",
  },
];
</script>

自定义主题

<template>
  <ConfigurableSimpleTabs :tabs="tabs" :theme="customTheme" size="large" />
</template>

<script setup>
const customTheme = {
  activeTextColor: "#3b82f6",
  indicatorColor: "#3b82f6",
  backgroundColor: "#f8fafc",
};
</script>

📚 API 文档

Props

必需属性

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

可选属性

| 属性 | 类型 | 默认值 | 描述 | | --------------- | -------------------------------- | -------------- | ---------------- | | defaultActive | string | 第一个标签 | 默认激活的标签ID | | size | 'small' \| 'medium' \| 'large' | 'medium' | 组件尺寸 | | theme | Partial<SimpleTabsTheme> | defaultTheme | 主题配置 | | style | Partial<StyleConfig> | 默认样式 | 样式配置 | | animation | Partial<AnimationConfig> | 默认动画 | 动画配置 | | responsive | Partial<ResponsiveConfig> | 默认响应式 | 响应式配置 | | className | string | undefined | 自定义类名 | | customStyle | Record<string, any> | undefined | 自定义样式 | | block | boolean | false | 块级显示 | | centered | boolean | false | 居中对齐 | | scrollable | boolean | false | 可滚动 |

类型定义

TabItem

interface TabItem {
  id: string; // 唯一标识符
  name: string; // 显示名称
  disabled?: boolean; // 是否禁用
  route?: string; // 路由地址
  icon?: string; // 图标 HTML (SVG)
}

SimpleTabsTheme

interface SimpleTabsTheme {
  activeTextColor: string; // 激活文字颜色
  inactiveTextColor: string; // 非激活文字颜色
  hoverTextColor: string; // 悬浮文字颜色
  backgroundColor: string; // 背景色
  indicatorColor: string; // 指示器颜色
  fontFamily: string; // 字体系列
  borderColor?: string; // 边框颜色
  boxShadow?: string; // 阴影
}

StyleConfig

interface StyleConfig {
  padding: string; // 内边距
  fontSize: string; // 字体大小
  fontWeight: string; // 字体粗细
  indicatorHeight: string; // 指示器高度
  indicatorStyle: IndicatorStyle; // 指示器样式
  borderRadius?: string; // 圆角
  gap?: string; // 标签间距
}

指示器样式

type IndicatorStyle = "line" | "dot" | "pill" | "underline";

• line - 底部线条 (默认)
• underline - 完整下划线
• dot - 圆点指示器
• pill - 药丸形状

事件

| 事件名 | 参数 | 描述 | | ------------ | --------------------------------------------- | ---------------------- | | tab-change | (tabId: string, tab: TabItem) | 标签页切换时触发 | | tab-click | (tabId: string, tab: TabItem, event: Event) | 标签页点击时触发 | | tab-hover | (tabId: string, tab: TabItem) | 鼠标悬浮在标签页时触发 | | tab-leave | (tabId: string, tab: TabItem) | 鼠标离开标签页时触发 |

🎨 预设配置

尺寸配置

const sizeConfigs = {
  small: {
    padding: "8px 10px",
    fontSize: "14px",
    fontWeight: "500",
    indicatorHeight: "2px",
  },
  medium: {
    padding: "14px 12px",
    fontSize: "16px",
    fontWeight: "600",
    indicatorHeight: "2px",
  },
  large: {
    padding: "16px 16px",
    fontSize: "18px",
    fontWeight: "700",
    indicatorHeight: "3px",
  },
};

默认主题

const defaultTheme = {
  activeTextColor: "rgb(20, 23, 26)",
  inactiveTextColor: "rgb(76, 82, 89)",
  hoverTextColor: "rgb(55, 65, 81)",
  backgroundColor: "#ffffff",
  indicatorColor: "rgb(20, 23, 26)",
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "Inter", sans-serif',
};

📖 更多示例

不同指示器样式

<!-- 线条指示器 -->
<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'line' }" />

<!-- 下划线指示器 -->
<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'underline' }" />

<!-- 圆点指示器 -->
<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'dot' }" />

<!-- 药丸指示器 -->
<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'pill' }" />

深色主题

<ConfigurableSimpleTabs
  :tabs="tabs"
  :theme="{
    activeTextColor: '#f9fafb',
    inactiveTextColor: '#9ca3af',
    hoverTextColor: '#d1d5db',
    backgroundColor: '#1f2937',
    indicatorColor: '#3b82f6',
  }"
/>

滚动标签页

<ConfigurableSimpleTabs :tabs="manyTabs" scrollable :style="{ gap: '32px' }" />

居中对齐

<ConfigurableSimpleTabs
  :tabs="tabs"
  centered
  :theme="{ backgroundColor: '#f8fafc' }"
/>

禁用动画

<ConfigurableSimpleTabs :tabs="tabs" :animation="{ enabled: false }" />

自定义响应式

<ConfigurableSimpleTabs
  :tabs="tabs"
  :responsive="{
    mobileBreakpoint: 1024,
    mobileStyle: {
      padding: '12px 8px',
      fontSize: '14px',
    },
  }"
/>

🎯 高级用法

程序化控制

<template>
  <ConfigurableSimpleTabs ref="tabsRef" :tabs="tabs" />
  <button @click="switchTab">切换到联系页</button>
</template>

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

const tabsRef = ref();

const switchTab = () => {
  tabsRef.value.setActiveTab("contact");
};
</script>

集成路由

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

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

const router = useRouter();

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

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

动态标签页

<template>
  <ConfigurableSimpleTabs :tabs="dynamicTabs" @tab-change="handleTabChange" />
  <button @click="addTab">添加标签页</button>
</template>

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

const dynamicTabs = ref([{ id: "tab1", name: "标签1" }]);

let tabCounter = 1;

const addTab = () => {
  tabCounter++;
  dynamicTabs.value.push({
    id: `tab${tabCounter}`,
    name: `标签${tabCounter}`,
  });
};
</script>

🌟 特色功能

无障碍访问

• 支持键盘导航 (Tab, Enter, 方向键)
• 兼容屏幕阅读器
• 符合 ARIA 标准
• 支持高对比度模式

性能优化

• CSS will-change 属性优化动画性能
• 响应 prefers-reduced-motion 媒体查询
• 最小重排和重绘
• 虚拟滚动支持 (可选)

浏览器兼容性

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

🛠️ 开发

# 克隆项目
git clone https://github.com/skillharbor/vue-simple-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