vue 导航栏组件,vue自定义组件封装
这篇文章主要为大家详细介绍了用某视频剪辑软件封装导航栏组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：把一个功能模块使用组件化的思想充分封装，如导航栏，这无论对我们的开发思想还是效率都有许多好处，在开发中，我们要尽量多得运用组件化的开发思想，不要把所有代码都写在同一个。某视频剪辑软件文件中，这样能大大提高代码的可读性。
封装导航栏
主要思路：把红色的部分当成一个个组件，而他们只是图片和文字不同，所以我们可以把他们封装成同一个组件，然后向组件里传入图片信息和文字信息即可（可以用插槽)。
//TabBarItem.vue
模板
div class= tabBarItem @ click= tabBarItem click
div v-if=！ isActive
插槽名称=项目图标/slot
/div
div-否则
slot name= item-icon-active /slot
/div
div :style=isActiveColor
slot name=item-text/slot
/div
/div
/模板
脚本
导出默认值{
名称： TabBarItem ，
道具：{
路径：字符串，
activeColor:{
类型：字符串，
默认值："粉色"
}
},
计算值：{
isActive:{
get(){
归还这个. route.path.indexOf(this.path)！==-1;
},
set(){}
},
isActiveColor(){
把这个还回去isActive？{color:this.activeColor}:{}
}
},
方法：{
tabBarItemClick(){
这个1000美元路由器。推(这个。路径)；
}
}
}
/脚本
样式范围。tabBarItem{
flex:1；
字体大小：12px
}。tabBarItem img{
margin-top:3px；
宽度：24px
垫底：3px
}
/风格
接下来就是封装一个把这四个选项放在同一个地方的容器。
//TabBar.vue
模板
div class=tabBar
插槽/插槽
/div
/模板
脚本
导出默认值{
名称：" TabBar "
}
/脚本
样式范围。标签栏{
显示器：flex
高度：49px
位置：固定；
左：0;
右：0;
底部：0;
文本对齐：居中；
盒影：0px -1px 1px rgba(100，100，100，1);
背景色：# f6f6f6
}
/风格
再接下来就是使用了，给每一个不同的TabBarItem的插槽写入不同的图片和文字信息。
//maintable bar。某视频剪辑软件
模板
div class= mainTabBar
标签栏
tab-bar-item path=/home active color= # ff 8198
img src= ~ assets/img/tabbar/home。SVG alt= slot= item-icon
img src= ~ assets/img/tabbar/home _ active。SVG alt= slot= item-icon-active
div slot=item-text 首页/div
/选项卡栏项目
tab-bar-item path=/category active color= # ff 8198
img src= ~ assets/img/tabbar/category。SVG alt= slot= item-icon
img src= ~ assets/img/tabbar/category _ active。SVG alt= slot= item-icon-active
div slot=item-text 分类/div
/选项卡栏项目
tab-bar-item path=/cart active color= # ff 8198
img src= ~ assets/img/tabbar/购物车。SVG alt= slot= item-icon
img src= ~ assets/img/tabbar/shopkart _ active。SVG alt= slot= item-icon-active
div slot=item-text 购物车/div
/选项卡栏项目
tab-bar-item path=/profile active color= # ff 8198
img src= ~ assets/img/tabbar/profile。SVG alt= slot= item-icon
img src= ~ assets/img/tabbar/profile _ active。SVG alt= slot= item-icon-active
div slot=item-text 我的/div
/选项卡栏项目
/选项卡栏
/div
/模板
脚本
从"组件/公共/标签栏/标签栏"导入标签栏
从"组件/内容/tabbar/TabBarItem "导入TabBarItem
导出默认值{
名称： MainTabBar ，
组件：{
TabBar，
TabBarItem
}
}
/脚本
风格
/风格
导航栏一般都在主页中使用，所以我们把这个导航栏放在App.vue
模板
div id=应用程序
主选项卡栏/主选项卡栏
/div
/模板
脚本
从"组件/内容/标签栏/维护标签栏"导入维护bbar
导出默认值{
名称：“应用程序”，
组件：{
维护栏
}
}
总结：从这个角度来看，我们用三个文件写了一个导航栏，看起来可能比较麻烦，但是也大大提高了代码的可读性。如果我们需要在这个项目的其他地方使用导航栏，我们只需要直接创建一个类似于MainTabBar的文件，然后在里面写上你想要的图片和文字。甚至当我们在其他项目中使用时，可以直接复制文件，直接使用，甚至不用CSS样式。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。