当前位置: 首页 > Web前端 > HTML

一个基于vue-router的tabs组件

时间:2023-03-28 14:15:49 HTML

前言该组件主要用于vue2.0+vue-router3及以上版本。主要解决方法是原生tab组件的contentmodule不能被组件管理。参考element-tab组件,假设tab页的内容覆盖了大量的逻辑场景,那么el-tabs就不那么适用了,会影响前端性能。详情见如下代码el-tab-pane>而这个tab插件每次切换只会显示当前组件,原理是通过基于vue-router动态改变router-viewname属性来操作,路由器配置:importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom'@/views/HelloWorld'importShowfrom'@/views/Show'importCostumerfrom"@/views/costumer";importEdufrom"@/views/edu";importFinicialfrom"@/意见/财务”;进口贸易from"@/views/trade";Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:HelloWorld},{path:"/tabs",名称:“标签”,组件:显示,子项:[{路径:“续”,名称:“客户”,组件:{默认:客户,服装:客户,教育:教育,金融:金融,贸易:贸易},}]},]})router-viewname属性动态渲染组件详细配置方法请点击以下链接了解:https://v3.router.vuejs.org/zh/guide/essentials/named-views.h...组件接受参数参数类型说明dataArray[Object]渲染数据wrapClassString组件包装的类名,用于主题颜色修改data下Object中的参数类型说明组件中字段名是否为ActiveBoolean选项卡代码库地址:https://github.com/xuxiaoyang883/eazy-tabsamples目录是例子dist目录是压缩版的组件packages目录是组件原代码本地项目启动说明:npmi//安装依赖npmrundev