欢迎

本项目有任何问题，欢迎提 issue 。

项目介绍

这是一个移动端 UI 插件项目，是一个可滑动切换的导航栏组件，基于 Vue3.x + TypeScript + Vite 开发。

入口文件为 src/index.ts 。

支持全局注册和按需引入，详见 src/index.ts 。

安装

npm install nav-tab

构建

npm run build

示例：

$ npm run build

> [email protected] build
> vue-tsc -b && vite build --mode build

vite v6.1.0 building for build...
transforming...
✓ 13 modules transformed.
rendering chunks...
computing gzip size...
dist/nav-tab.css     1.14 kB │ gzip: 0.49 kB
dist/es/nav-tab.js  10.67 kB │ gzip: 4.04 kB │ map: 33.58 kB
Entry module "src/index.ts" is using named and default exports together. Consumers of your bundle will have to use `chunk.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
dist/nav-tab.css      1.14 kB │ gzip: 0.49 kB
dist/cjs/nav-tab.cjs  7.54 kB │ gzip: 2.91 kB │ map: 32.97 kB
✓ built in 208ms

作为依赖库使用

全局注册或按需引入

case1、全局注册

示例：

import { createApp } from 'vue'
import App from './App.vue'
import NavTab from 'nav-tab'
// - 【#警告】：此处引入的样式较早，会被后面引入的样式覆盖;也可能被前面引入的样式（如 ./style.css）影响（非覆盖）。
import 'nav-tab/nav-tab.css';

const app = createApp(App)
app.use(NavTab) // 全局引入 nav-tab 插件
app.mount('#app')

case2、按需引入

示例：

import { TabItem, TabsHead, TabsBottom } from 'nav-tab';
import 'nav-tab/nav-tab.css';

样式的引用

样式的引用方式，要参考**「nav-tab 库 -> package.json -> exports 选项」**中，导出样式文件的方式。

比如：

"exports": {
    "./nav-tab.css": "./dist/nav-tab.css",
},

那么，import 'nav-tab/nav-tab.css'; 就相当于引入了 ./dist/nav-tab.css 。