Vue CLI 2 脚手架 TabBar 组件封装

1. 前言2. 清理脚手架3. 搭建 tabbar 基本布局4. 书写 tabbar 基本样式5. TabBar 组件封装6. TabBarItem 组件封装7. 给 TabBarItem 组件传入选中时的图片8. TabBarItem 组件和路由结合效果9. TabBarItem 组件的颜色动态控制

1. 前言

---

本文记录在 vue cli 2 中封装 tabbar 组件详细步骤，主要是为了感受 vue 的组件封装思想，也是前面学习 vue 基础的练习案例

2. 清理脚手架

---

删除图片: src/assets/logo.png

删除 HelloWorld 组件: src/components/HelloWorld.vue

清理 HelloWorld 组件: src/router/index.js (HelloWorld 组件路由配置)

清理 APP 组件: src/App.vue, 去除样式代码和模板内容，清理后内容如下:

<template>    <div id="app"></div></template><script>export default {    name: "App",};</script><style></style>

3. 搭建 tabbar 基本布局

---

APP 组件

<template>    <div id="app">        <div id="tab-bar">            <div>首页</div>            <div>分类</div>            <div>购物车</div>            <div>我的</div>        </div>    </div></template>

tabbar 图片存放目录: src/assets/img/tabbar

基础样式文件: src/assets/css/base.css

body {  margin: 0;  padding: 0;}

在 APP 组件的 style 标签中导入基础样式文件

<style>@import "./assets/css/base.css";</style>

4. 书写 tabbar 基本样式

---

补充: tabbar 高度一般都是 49px，文字大小 14px

模板内容

<template>    <div id="app">        <div id="tab-bar">            <div class="tab-bar-item">首页</div>            <div class="tab-bar-item">分类</div>            <div class="tab-bar-item">购物车</div>            <div class="tab-bar-item">我的</div>        </div>    </div></template>

样式代码

@import "./assets/css/base.css";#tab-bar {    display: flex;    position: fixed;    left: 0;    right: 0;    bottom: 0;    background-color: #f6f6f6;    box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);}.tab-bar-item {    flex: 1;    height: 49px;    text-align: center;    font-size: 14px;}

效果如下图所示

5. TabBar 组件封装

---

创建 TabBar 组件: src/components/tabbar/TabBar.vue

将 APP.vue 中的 tabbar 代码抽离到 TabBar 组件中，TabBar 组件内容:

<template>    <div id="tab-bar">        <div class="tab-bar-item">首页</div>        <div class="tab-bar-item">分类</div>        <div class="tab-bar-item">购物车</div>        <div class="tab-bar-item">我的</div>    </div></template><script>export default {    name: "TabBar",};</script><style scoped>#tab-bar {    display: flex;    position: fixed;    left: 0;    right: 0;    bottom: 0;    background-color: #f6f6f6;    box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);}.tab-bar-item {    flex: 1;    height: 49px;    text-align: center;    font-size: 14px;}</style>

调整 TabBar 组件

<div id="tab-bar">    <div class="tab-bar-item">        <img src="@/assets/img/tabbar/home.png" />        <div>首页</div>    </div>    <div class="tab-bar-item">        <img src="@/assets/img/tabbar/category.png" />        <div>分类</div>    </div>    <div class="tab-bar-item">        <img src="@/assets/img/tabbar/cart.png" />
更新于：3小时前