VUE-CLI学习第六天

vue-cli-tabbar封装学习

slot实现tabbar封装

创建tabbar组件（TabBar.vue）

• 创建tab-bar块，并放入slot插槽,slot可以在在调用此组件时插入其他组件

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

• 导出组件

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

• 渲染css

  <style scoped>
      #tab-bar{
          display: flex;
          background-color: burlywood;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          box-shadow: 0px -3px 1px rgba(100,100,100,.08);
      }
  </style>
  

创建tabbarItem组件（TabBarItem.vue）

• 创建tab-bar-item块，并放入slot插槽
• @click="itemClick"绑定itemClick点击事件
• :style="activeStyle"绑定activeStyle样式来渲染

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

• 导出组件并定义js操作
• props接收tabbar传来的属性
• 使用computed计算属性来判定操作
  • this.$route.path.indexOf(this.path) !== -1判定当前路径是否是活跃路径
  • return this.isActive ? {color: this.activeColor} : {}根据isActive值来返回样式
• itemClick事件触发来跳转界面

  <script>
      export default {
          name: "TarBarItem",
          props: {
              path: String,
              activeColor:{
                  type: String,
                  default: 'red'
              }
          },
          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>
  

• 渲染css

  <style scoped>
      .tab-bar-item{
          flex: 1;
          text-align: center;
          height: 49px;
      }
      .tab-bar-item img {
          height: 25px;
      }
  </style>
  

创建路由(同时创建4个相应界面-此步骤省略)

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    const routes = [
        {
        path: '/',
        redirect: '/home1'
        },
        {
        path: '/home1',
        component: () => import('../views/pages/Home')
        },
        {
        path: '/home2',
        component: () => import('../views/pages/Home2')
        },
        {
        path: '/home3',
        component: () => import('../views/pages/Home3')
        },
        {
        path: '/home4',
        component: () => import('../views/pages/Home4')
        },
    ]
    const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
    })
    export default router

App.vue实现tabbar

1. 使用组件，标签使用组件名，组件名以驼峰命名法，例：组件名-TabBar，标签名可用-<tabBar>/<tab-bar>
2. 插槽可根据之前定义的slot-name来绑定，例：<slot name='a'></slot>--对应--<div slot='a'></div>
3. <tab-bar-item path="/home1" active-color="blue">传递path、activeColor属性到tabBarItem组件

   <template>
   <div id="app">
       <router-view/>
       <tabBar>
       <tab-bar-item path="/home1" active-color="blue">
           <img slot="item-icon" src="./assets/img/1.svg" alt="1">
           <img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
           <div slot="item-text">首页</div>
       </tab-bar-item>
       <tab-bar-item path="/home2">
           <img slot="item-icon" src="./assets/img/1.svg" alt="1">
           <img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
           <div slot="item-text">首页2</div>
       </tab-bar-item>
       <tab-bar-item path="/home3">
           <img slot="item-icon" src="./assets/img/1.svg" alt="1">
           <img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
           <div slot="item-text">首页3</div>
       </tab-bar-item>
       <tab-bar-item path="/home4">
           <img slot="item-icon" src="./assets/img/1.svg" alt="1">
           <img slot="item-icon-active" src="./assets/img/3.svg" alt="1">
           <div slot="item-text">首页4</div>
       </tab-bar-item>
       </tabBar>
   </div>
   </template>
   

• 导入组件

  <script>
      import TabBar from "./views/TabBar";
      import TabBarItem from "./views/TarBarItem";
      export default {
          name: 'App',
          components: {
          TabBar,
          TabBarItem
          }
      }
  </script>
  

效果图