基于vue组件思想的移动端导航栏 —— TabBar

用vue CLI 3.0搭建的项目结构,组件目录结构如图,做个笔记。

基于vue组件思想的移动端导航栏 —— TabBar_第1张图片

封装TabBar组件:

基于vue组件思想的移动端导航栏 —— TabBar_第2张图片

组件目录结构:


MainTabBar.vue —> TabBar.vue —> TabBarItem.vue

思路就是,TabBar 里的内容由插槽决定,然后用 flex 布局平分TabBar。

然后自定义四个 item ,可以传入图片和文字,item 里的图片和文字用插槽来实现,插槽外再用 div 包装,用来设置样式。

插槽就相当于占位符。


1、TabBarItem.vue 页面中:

这个组件主要为TabBar内部的子组件,项目中需要放几个就可以放几个,并且点击的时候将会跳转到对应的路由当中。

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

使用组件 TabBarItem 往里面填充内容时,就利用插槽来实现:slot = " " :

2、MainTabBar.vue页面中使用:

 <tab-bar>
    <tab-bar-item>
       <img slot="item-icon" src="@/assets/images/tabbar/home.svg" alt="" />
       <img
           slot="item-icon-active"
           src="@/assets/images/tabbar/home_active.svg"
           alt=""/>
       <div slot="item-text">首页div>
    tab-bar-item>
tab-bar>

占位符插槽使用很简单,直接填充名字slot=“ ”,然后往里面填充内容。


3、TabBar.vue 页面完整内容,只需要添加一个插槽,用来填充TabBarItem:

<template>
    <div id="tab-bar">
        <slot>slot>
    div>
template>


4、TabBarItem.vue 页面中完整内容:

<template>
  <div class="tab-bar-item" @click="itemClick">
      <!-- icon -->
      <div v-if="!isActive"><slot name="item-icon"> </slot></div>
      <!-- 活跃的icon -->
      <div v-else><slot name="item-icon-active"> </slot></div>
      <!-- 文字 -->
      <div :style="activeStyle"><slot name="item-text"> </slot></div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
      path: String,
      activeColor: {
          type: String,
          default: "#fc5979",
      },
  },
  computed: {
      isActive() {
          return this.$route.path.indexOf(this.path) !== -1;
      },
      activeStyle() {
          return this.isActive ? { color: this.activeColor } : {};
      },
  },
  methods: {
      itemClick() {
          this.$router.replace(this.path);
      },
  },
};
</script>

<style lang="scss" scoped>
.tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
    img {
        width: 24px;
        height: 24px;
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }
}
</style>


5、MainTabBar.vue 页面中完整内容:

只展示了一个item

<template>
   <tab-bar>
      <tab-bar-item path="/home" activeColor="#fc5979">
         <img slot="item-icon" src="@/assets/images/tabbar/home.svg" alt="" />
         <img
             slot="item-icon-active"
             src="@/assets/images/tabbar/home_active.svg"
             alt=""/>
         <div slot="item-text">首页</div>
      </tab-bar-item>
   </tab-bar>
</template>

<script>
import TabBar from "@/components/common/tabbar/TabBar";
import TabBarItem from "@/components/common/tabbar/TabBarItem";

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


涉及到的组件传值:

MainTabBar是父组件,TabBarItem为子组件,父组件需要传两个值:1.点击tab切换的路由 path 2.点击tab切换活跃状态 activeColor。

TabBarItem组件中,点击切换活跃的样式,父组件点击,然后props传递给item子组件。在computed计算属性中。返回不同的布尔值。来做底部图片的显示隐藏。

你可能感兴趣的:(鸡毛蒜皮,vue.js,javascript,TabBar,父子组件传值,插槽)