vue3-tabor

🚀 A powerful Vue 3 tab routing solution that supports tab navigation with keepAlive capability

Compatible with multiple component libraries and providing rich customization options

English | 中文

## ✨ Features - **🔥 Easy to Use**: Zero learning curve, just import and use - **🎨 Highly Customizable**: Rich APIs and configurations to meet requirements from basic to complex - **📦 Lightweight & Efficient**: Optimized for Vue 3 and Vue Router 4, delivering excellent performance with a small footprint - **💪 TypeScript Support**: Developed with TypeScript, providing complete type definitions for superior development experience ## 🛠️ Core Functionality - ### Basic Features - ✅ **Route Response**: Automatically responds to route changes, opening and switching tabs - ✅ **Tab Management**: - ✅ Open/Replace tabs - ✅ Close tabs - ✅ Close other tabs - ✅ Refresh tabs - ✅ Right-click menu operations - ✅ **Cache Control**: Supports tab content caching for improved user experience - ⏳ **Global Configuration**: Supports global and custom configurations (in development) - ⏳ **Lifecycle Hooks**: Provides rich lifecycle events (in development) - ### Advanced Features - ✅ **iframe Support**: Built-in iframe routing support for easy integration of external pages - ⏳ **Animation Effects**: Tab switching animations (in development) - ⏳ **Internationalization**: Multi-language support (in development) - ⏳ **Analytics**: Tab access statistics (in development) ## 📦 Installation ```bash npm install vue3-tabor ``` ## 🚀 Quick Start ### 1. Import and register the plugin in your entry file ```js import { createApp } from "vue"; import Tabor from "vue3-tabor"; // Import CSS file (required) import "vue3-tabor/dist/assets/index.css"; import router from "./router"; import App from "./App.vue"; const app = createApp(App); app.use(router); app.use(Tabor, { router, // Pass the router instance maxCache: 10 // Optional: maximum cache size }); app.mount("#app"); ``` ### 2. Use the tab component in your layout ```html ``` ## 📖 API Documentation ### Global Configuration When installing the plugin, you can pass the following configuration options: ```js app.use(Tabor, { router: router, // Required: Vue Router instance maxCache: 10, // Optional: Maximum cache size, default is 10 }); ``` ### Component Props The `` component supports the following properties: | Prop | Type | Default | Description | |------|------|---------|-------------| | maxAlive | Number | 10 | Maximum number of cached tabs | | hideClose | Boolean | false | Whether to hide the close button | | beforeClose | Function | - | Hook function called before closing a tab, returns Promise\ | | tabClass | String | - | Custom CSS class for tabs | | pageClass | String | - | Custom CSS class for pages | | dropdownClass | String | - | Custom CSS class for dropdown menu | | tabType | String | 'line' | Tab type, options: 'line', 'card' | | style | Object | - | Custom style variables | | tabPrefix | Component | - | Tab prefix component | | language | String | 'zh' | UI language, options: 'zh', 'en' | ### Internationalization vue3-tabor supports both Chinese and English languages, which can be configured as follows: ```html

``` ### Style Variables vue3-tabor provides CSS variables that can be customized through the style prop or global CSS. Below are the available style variables: #### Basic Configuration ```html ``` #### Tab Appearance ```html ``` #### Content Area ```html ``` #### Preset Theme Examples **Default Theme (Light)** ```html ``` **Dark Theme** ```html ``` **Bright Blue Theme** ```html ``` #### Customizing Styles with Global CSS In addition to using the component's style prop, you can customize styles through global CSS variables: ```css /* In your global CSS file */ :root { --primary-color: #5a67d8; --tab-height: 40px; --tab-background-color: rgba(248, 249, 250, 0.5); /* Other variables... */ } ``` #### Advanced Style Customization For deeper customization needs, you can use the following methods: 1. **Add custom styles using provided class names**: ```css /* Custom tab styles */ .tabor-tab { /* Custom styles */ } /* Custom active tab styles */ .tabor-tab-active { /* Custom styles */ } ``` 2. **Add prefix content using the tabPrefix prop**: ```html ``` ### Instance Methods You can access the following methods through the `useTabor` hook: ```js // In your component import { useTabor } from 'vue3-tabor' export default { setup() { const tabor = useTabor(); // Use tabor methods return { tabor }; } } ``` | Method | Parameters | Return | Description | |--------|------------|--------|-------------| | open | (to: RouteLocationRaw, options?: OpenProps) | Promise\ | Open a new tab | | close | (item?: TabGetter, toOptions?: ToOptions) | Promise\ | Close a tab | | closeOthers | (tabId?: TabId) | void | Close other tabs | | refresh | (tabId?: TabId) | void | Refresh a tab | | find | (tabId: TabId) | Tab \| undefined | Find a tab by ID | | has | (tabId?: TabId) | boolean | Check if a tab exists | | setActive | (tab: Tab) | void | Set the active tab | | remove | (item: { id?: TabId; fullPath?: string }) | void | Remove a tab | ### Tab-Related Types ```typescript // Tab configuration interface TabConfig { key?: "path" | "fullPath" | ((route) => string); name?: string | (route:RouteLocationNormalized) => string; keepAlive?: boolean; icon?: string; iframeAttributes?: IframeAttributes; } // Tab information interface Tab { id: string; name: string | symbol | (route:RouteLocationNormalized) => string; icon?: string; keepAlive?: boolean; fullPath: string; allowClose?: boolean; iframeAttributes?: IframeAttributes; routeName?: string; } // Options for opening a tab interface OpenProps { replace?: boolean; // Whether to replace the current tab refresh?: boolean; // Whether to refresh tabConfig?: TabConfig; // Tab configuration } ``` ### iframe Support vue3-tabor supports opening external pages in tabs: ```js // Open an iframe tab tabStore.open({ path: '/iframe', query: { src: 'https://example.com', title: 'External Page' } }, { tabConfig: { iframeAttributes: { src: 'https://example.com', width: '100%', height: '100%' } } }); ``` ### Route Configuration You can set tab configurations through `meta.tabConfig` in your route configuration. Use `satisfies TabConfig` to ensure type safety: ```typescript const routes = [ { path: '/home', component: Home, meta: { tabConfig: { hideClose: true, // Hide close button keepAlive: true, // Enable cache name: 'Home' } satisfies TabConfig } } ] ``` ## 🔧 Tech Stack - **💻 Vue 3**: Developed with the latest Vue 3.x version - **🔄 Vue Router 4**: Deep integration with Vue Router - **💪 TypeScript**: Type-safe code development experience - **👬 Vitest**: Reliable unit testing support ## 📚 Additional Resources - [Issue Reporting](https://github.com/daylenjeez/vue3-tabor/issues)