共计 1450 个字符,预计需要花费 4 分钟才能阅读完成。
前言
此组件次要利用于 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
正文完