vue组件化思想应用之tabbar

vue组件化思想应用之tabbar

App.vue调用了TabBar.vue和TabbarItem.vue

其中App.vue

html代码

<template>
  <div id="app">
    <tab-bar>
      <tab-bar-item v-for="(value,name) in tabbar" :key="name">
        <img slot="item-icon" :src="require('./assets/img/tabbar/'+name+'.svg')" alt="">
        <div slot="item-text">{{value}}</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

javascript代码

<script>
  import TabBar from "./components/tabbar/TabBar";    //导入
  import TabBarItem from "./components/tabbar/TabBarItem";    //导入
  export default {
    name: 'App',          //这个组件名叫App
    data(){
      return {
        tabbar: {
          home: '首页',
          category: '分类',
          shopcart: '购物车',
          profile: '我的',
        }
      }
    },
    components: {
      TabBarItem,
      TabBar,
    },
  }
</script>

TabBar.vue

html

<template>
  <div id="tab-bar">
<!--    很简单的设置一个插槽-->
    <slot></slot>		
  </div>
</template>

javascript

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

css我们在这里就把对应的层次css写好

<style scoped>
  #tab-bar {
    display: flex;
    background-color: #f6f6f6;
    height: 49px;
    position: fixed;
    width: 100%;
    bottom: 0;
    /*justify-content: space-between;*/
    box-shadow: 0 -3px 1px rgba(100,100,100,0.2);
  }
</style>

TabBarItem.vue

html

<template>
  <div class="tab-bar-item">
    <slot name="item-icon" ></slot>
    <slot name="item-text"></slot>
  </div>
</template>

JavaScript

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

css 同样的把对应层次的css写好

<style scoped>
.tab-bar-item {
  flex:1;
  text-align: center;
  font-size: 13px;
}
.tab-bar-item  img{
  width: 24px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 2px;
  vertical-align: middle;
}
</style>