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
},
]
})

参考