插槽快速实现vue项目tabbar导航
2020-03-02 00:06
691 查看
在vue项目中,快速用插槽实现tabbar导航,只要在页面在中写具体业务逻辑,实现敏捷开发。
这是TabBar的组件代码:
<template> <div id="tab-bar"> <!-- 用插槽实现tabbar --> <slot></slot> </div> </template> <script> export default { name: "TabBar" }; </script> <style scoped> #tab-bar { display: flex; background: #f6f6f6; position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2); justify-content: space-around; } </style>
这是TabBarItem的组件代码:
<template> <div> <div class="tab-bar-item" @click="tabClick"> <!-- 用插槽是实现tabitem --> <div v-if="!isActive"> <slot name="item-icon"></slot> </div> <div v-else> <slot name="item-icon-active"></slot> </div> <div :style="activeStyle"> <slot name="item-text"></slot> </div> </div> </div> </template> <script> export default { name: "TabBarItem", props: { path: String, activeColor: { type: String, default: "gray" } }, data() { return { // isActive: true }; }, computed: { isActive() { return this.$route.path.indexOf(this.path) !== -1; }, activeStyle() { return this.isActive ? { color: this.activeColor } : {}; } }, methods: { tabClick() { console.log("methods"); this.$router.replace(this.path); } } }; </script> <style scoped> .tab-bar-item { flex: 1; text-align: center; height: 49px; font-size: 14px; } .tab-bar-item img { width: 24px; height: 24px; margin-top: 3px; vertical-align: middle; margin-bottom: 3px; } </style>
只需要在app.vue配置你需要的几个导航,例子:
<template> <div id="app"> <tab-bar> <!-- 这里只要增加tabbar就行,组件内部不需要修改 --> <tab-bar-item path="/home" activeColor="red"> <img slot="item-icon" src="./assets/img/tabbar/main.png" alt="" /> <img slot="item-icon-active" src="./assets/img/tabbar/selectedmain.png" alt=""> <div slot="item-text">首页</div> </tab-bar-item> <tab-bar-item path="/message" activeColor="red"> <img slot="item-icon" src="./assets/img/tabbar/message.png" alt="" /> <img slot="item-icon-active" src="./assets/img/tabbar/selectedmessage.png" alt=""> <div slot="item-text">消息</div> </tab-bar-item> <tab-bar-item path="/mine" activeColor="red"> <img slot="item-icon" src="./assets/img/tabbar/mine.png" alt="" /> <img slot="item-icon-active" src="./assets/img/tabbar/selectedmine.png" alt=""> <div slot="item-text">我的</div> </tab-bar-item> </tab-bar> <router-view></router-view> </div> </template> <script> /* 引入组件 */ import TabBar from "./components/tabbar/TabBar"; import TabBarItem from "./components/tabbar/TabBarItem"; export default { name: "App", components: { TabBar, TabBarItem } }; </script> <style> /* 在style中引入样式方法 */ @import "./assets/css/base.css"; </style>
activeColor=“red” 传入选中的颜色,颜色根据自己需求填, TabBar组件和TabBarItem都不需要改动,就能快速实现底部导航。
我把完整的代码附上。
https://download.csdn.net/download/qq_14948637/12155611
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 32.怎样在Swift中实现TabBar和导航视图结合的项目?
- vue项目移动端用vant实现的头部组件
- 基于vue实现移动端点击上方导航,内容滑动切换,滑动内容导航自动切换。
- Vue项目中实现图片懒加载
- vue-cli快速搭建vue项目并上传github
- 本地vue项目放到github如何实现在线预览
- Vue项目使用CSS变量实现主题化
- vue项目中将px转化为rem来实现移动端的适配
- 快速搭建vue2.0+boostrap项目的方法
- Vue项目中使用better-scroll实现一个轮播图自动播放功能
- [转]用Fragment+ViewPager+Tab实现快速导航
- vue学习笔记-使用vue-cli脚手架快速创建vue项目工程
- 基于Vue.js的大型报告页项目实现过程及问题总结(二)
- 转:如何在Vue项目中使用vw实现移动端适配
- 【业务】Vue项目里利用md5的来实现一个权限系统的思路记录
- 详解vue-cli项目开发/生产环境代理实现跨域请求
- 【Vue】如何使用脚本架工具vue-cli快速创建vue项目
- vue项目中如何实现国际化
- WebService—快速实现一个基于JAX-WS的WebService项目(二)
- Android快速实现上传项目到Github(原来Android Studio的git已经这么好用了)