Vue 第一个组件

TabBar，基于 Vue 的底栏组件。

一、效果

​

二、目录结构

1. components

用于放置公共组件。

其中 tabbar 文件夹用来放置 TabBar 组件的相关代码文件。

  • MainTabBar.vue：将放置组件和配置组件的代码单独独立出来，使 App.vue 更加整洁
  • TabBar.vue：放置 TabBar 组件
  • TabBarItem.vue：放置 TabBar 的子组件，即其中的元素

2. router

放置路由配置文件。

3. views

用于放置属于特定视图的组件。

4. App.vue

根组件。

5. main.js

入口文件。

​

三、components

1. MainTabBar.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  // 引用TabBar，并在插槽中填入四个TabBarItem
  <TabBar>
  	// 填入TabBarItem，并向子组件传递参数
    <TabBarItem path="/home" active-color="blue">
      <i class="iconfont">&#xe6ef;</i><p>首页</p>
    </TabBarItem>
    <TabBarItem path="/category">
      <i class="iconfont">&#xe743;</i><p>分类</p>
    </TabBarItem>
    <TabBarItem path="/cart" active-color="green">
      <i class="iconfont">&#xe746;</i><p>购物车</p>
    </TabBarItem>
    <TabBarItem path="/profile" active-color="deepPink">
      <i class="iconfont">&#xe7a7;</i><p>我的</p>
    </TabBarItem>
  </TabBar>
</template>

<script>
// 引入并注册组件
import TabBar from "./TabBar";
import TabBarItem from "./TabBarItem";

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

<style scoped>

</style>

2. TabBar.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div id="TabBar">
    // 放置插槽，以便向其中插入元素
    <slot></slot>
  </div>
</template>

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

<style scoped>
  #TabBar {
    display: flex;
    background-color: #f6f6f6;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 49px;
    padding-top: 4px;
    box-sizing: border-box;
    box-shadow: 0 -1px 3px rgba(100, 100, 100, 0.08);
  }
</style>

3. TabBarItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  // 绑定点击事件和动态属性
  <div class="TabBarItem" @click="itemClick" :style=activeStyle>
    // 插入标题和icon
    <slot></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  // 通过props新建属性，使得父组件能够向其传递数据
  props: {
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  methods: {
    // 点击时跳转
    itemClick() {
      this.$router.replace(this.path)
    }
  },
  computed: {
    isActive() {
      // 当前的路径中没有出现path时，indexOf返回-1
      return this.$route.path.indexOf(this.path) != -1;
    },
    activeStyle() {
      return this.isActive ? {color:this.activeColor} : {};
    }
  }
}
</script>

​

四、router

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../views/home/Home";
import Category from "../views/category/Category";
import Cart from "../views/cart/Cart";
import Profile from "../views/profile/Profile";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '',
      redirect: '/home'
    },
    {
      path: '/home',
      name: '首页',
      component: Home
    },
    {
      path: '/category',
      name: '分类',
      component: Category
    },
    {
      path: '/cart',
      name: '购物车',
      component: Cart
    },
    {
      path: '/profile',
      name: '我的',
      component: Profile
    },
  ]
})

​

参考