前言
此组件次要利用于vue2.0+vue-router3及以上运行的。
次要解决原生tab组件的内容模块不能组件化治理。
参照element-tab组件来说，
假如tab页的内容外面涵盖大量逻辑场景的状况下，那么el-tabs就不那么实用了，并且会影响前端性能，详情见上面代码
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户治理" name="first"><component1></el-tab-pane> <el-tab-pane label="配置管理" name="second"><component2></el-tab-pane> <el-tab-pane label="角色治理" name="third"><component3></el-tab-pane> <el-tab-pane label="定时工作弥补" name="fourth"><component4></el-tab-pane> </el-tabs>而这款tab插件每次切换的时候只会显示以后组件，原理是根据vue-router动静扭转router-view name属性来操作的，
router配置:
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/views/HelloWorld'import Show from '@/views/Show'import Costumer from "@/views/costumer";import Edu from "@/views/edu";import Finicial from "@/views/finicial";import Trade from "@/views/trade";Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path:"/tabs", name:"Tabs", component:Show, children:[{ path:"cont", name:"Costumer", components:{ default:Costumer, costumer:Costumer, edu:Edu, finicial:Finicial, trade:Trade }, }] }, ]})router-view name属性动静渲染组件具体配置办法请点击上面链接理解：
https://v3.router.vuejs.org/zh/guide/essentials/named-views.h...
组件承受参数
| 参数 | 类型 | 阐明 |
|---|---|---|
| data | Array[Object] | 渲染数据 |
| wrapClass | String | 组件包装的类名，用于主题色彩批改 |
| data下Object里的参数 | 类型 | 阐明 |
|---|---|---|
| key | Number | 渲染数据的用v-key |
| name | String | 选项卡的题目 |
| fadeName | String | 选项卡对应路由表里components里的字段名 |
| isActive | Boolean | 选项卡是否选中 |
代码仓库地址:https://github.com/xuxiaoyang883/eazy-tabs
examples目录为示例
dist目录是组件压缩过的版本
packages目录是组件原始代码
本地我的项目启动指令:
npm i //装置依赖
npm run dev