开发一个导航栏组件,主要在移动端使用,可以打开浏览器的手机模式查看。
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
- TabBar组件代表整个导航栏,TabBarItem组件代表导航按钮(包括文字和图片)
- 在TabBar组件中传入若干个TabBarItem组件
- 在TabBarItem组件中传入两张图片和文字
- 一张代表按钮未激活时的图片,slot的name是
item-icon
- 另一张代表按钮被激活时显示的图片,slot的name是
item-icon-active
- 文字的slot的name是
slot-text
。另外,文字的默认颜色是橘红色,如果对该颜色不满意,可以在使用TabBarItem的地方传入activeColor
参数
- 一张代表按钮未激活时的图片,slot的name是
- 配合路由使用的步骤
- 自己先定义好路由和组件的映射关系
- 在使用TabBarItem的地方传入
path
参数
- 又定义了一个MainTabBar组件做进步封装,用于简化在App.vue文件中的代码。在App.vue 中使用MainTabBar,在MainTabBar中使用TabBar和TabBarItem
封装好的组件在 src/components/tabbar
路径下,可以直接复制使用。使用案例请查看 App.vue 文件