TabBar案例演示

1. 使用 vueCLI 搭建 Demo

1. 使用 vue create mine_tab_bar 命令创建一个简单的项目，选择一些简单的路由配置。

2. 定义 base.css文件初始化页面样式

1. 在assets下创建一个css文件夹并创建base.css文件。定义如下样式：

body {
  padding: 0;
  margin: 0;
}

2. 注意:在style标签中引入样式的方法，需要使用 @import '文件路径':

@import url('./assets/css/base.css');

3. 在 components 下创建 Tabbar 组件

1. 在 components文件夹下创建一个TabBar的文件夹。定义一个文件，定义一个插槽：外界可进行自由的扩展。

<template>
  <div class="tab_bar">
    <!-- 定义一个个插槽外界向里面插入内容 -->
    <slot></slot>
  </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

  .tab_bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    font-size: 14px;
    background-color: #f6f6f6;
    box-shadow: -3px 0 15px rgba(0,0,0,.1);
  }

</style>

4. 此时在App.vue中使用该自定义组件 TarBar

1. 先引入需要使用过的组件，再对组件进行注册：

import TabBar from './components/TabBar';

对需要使用的组件进行注册

5. 将每一个TabBar里面的 Item 抽取为一个个的组件方便进行复用

<template>
  <div class="tab_ber-item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="tab_bar_icon"></slot>
    </div>

    <div v-else>
      <slot name="tab_bar_icon_active"></slot>
    </div>

    <div :style="isActiveColor">
      <slot name="tab_bar_text"></slot>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        props: {
            path: String,
            activeColor: {
                type: String,
                default: 'red'
            }
        },
        data() {
            return {}
        },
        methods: {
            itemClick() {
                this.$router.push(this.path);
            }
        },
        computed: {
            isActive() {
                // 判断当前的请求路径中 是否包含父组件传递过来的 path
                return this.$route.path.indexOf(this.path) !== -1
            },
            isActiveColor() {
                return this.isActive ? {color: this.activeColor} : {}
            }
        }
    }
</script>

<style scoped>

  .tab_ber-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    margin-top: 3px;
  }

  .tab-bar-item img {
    width: 26px;
    vertical-align: middle;
  }

</style>

6. 分别创建 首页、分类、购物车、我的四个组件并配置路由

在views下创建四个组件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = () => import('../views/Home')
const Category = () => import('../views/Category')
const Cart = () => import('../views/Cart')
const Profile = () => import('../views/Profile')

const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/category',
        component: Category
    },
    {
        path: '/cart',
        component: Cart
    },
    {
        path: '/profile',
        component: Profile
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

7. 在App的 TabBar 中使用 TabBarItem

1. 注意点:通过父传子的方式将每个item的路径传递给子组件。

父子组件之间传递数据

<template>
  <div id="app">
    <router-view/>
    <tab-bar>
      <tab-bar-item path="/home" active-color="pink">
        <img src="./assets/img/tabbar/home.svg" alt="" slot="tab_bar_icon">
        <img src="./assets/img/tabbar/home_active.svg" alt="" slot="tab_bar_icon_active">
        <div slot="tab_bar_text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category">
        <img src="./assets/img/tabbar/category.svg" alt="" slot="tab_bar_icon">
        <img src="./assets/img/tabbar/category_active.svg" alt="" slot="tab_bar_icon_active">
        <div slot="tab_bar_text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart">
        <img src="./assets/img/tabbar/shopcart.svg" alt="" slot="tab_bar_icon">
        <img src="./assets/img/tabbar/shopcart_active.svg" alt="" slot="tab_bar_icon_active">
        <div slot="tab_bar_text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" active-color="skyblue">
        <img src="./assets/img/tabbar/profile.svg" alt="" slot="tab_bar_icon">
        <img src="./assets/img/tabbar/profile_active.svg" alt="" slot="tab_bar_icon_active">
        <div slot="tab_bar_text">个人资料</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
    import TabBar from './components/TabBar';
    import TabBarItem from './components/TabBarItem';

    export default {
        name: "App",
        components: {
            TabBar,
            TabBarItem
        }
    }
</script>

<style>

  @import url('./assets/css/base.css');

</style>

8. 为路径起别名

1. 在VueCLI3 以上的版本就需要找到隐藏的配置文件进行修改了。

起别名的地方

2. 为什么要起别名？答：由于将首页组件进行抽取，路径变得很长很长，为了简化路径的写法。

这里的路径需要向外走两层

3. 当配置了别名之后

起了别名之后需要进行这样配置