vue学习记录 coderwhy d10

Posted 2021-07-22 Kooklen_xh

tabbar-item

<template>
  <div class="tab-bar-item">
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else="isActive"><slot name="item-icon-act"></slot></div>
    <div v-bind:class="{isSelect:isActive}"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  data(){
    return{
      isActive:true
    }
  }
}
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}

.tab-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
  background-color: #f6f6f6;
  font-size: 14px;
  margin-top: 3px;
  vertical-align: middle;
}
.isSelect{
  color: red;
}
</style>

最后
app.vue

在这里插入代码片

<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar>
      <tab-bar-item path="/index" activeColor="red">
          <img slot="item-icon" src="./assets/img/tabbar/indexactive.png" height="20" width="20">
         <img slot="item-icon-act" src="./assets/img/tabbar/index.png" height="20" width="20">
          <div slot="item-text">主页</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="red">
 <img slot="item-icon" src="./assets/img/tabbar/Category2.png" height="20" width="20">

          <img slot="item-icon-act" src="./assets/img/tabbar/category.png" height="20" width="20">
        <div slot="item-text">分类</div>

      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="red">
       <img slot="item-icon" src="./assets/img/tabbar/shop-cart-.png" height="20" width="20">

          <img slot="item-icon-act" src="./assets/img/tabbar/shop-cart-3.png" height="20" width="20">
       <div slot="item-text">购物车</div>
      </tab-bar-item>

      <tab-bar-item path="/home" activeColor="red">
        <img slot="item-icon" src="./assets/img/tabbar/Profile_1.png" height="20" width="20">

          <img slot="item-icon-act" src="./assets/img/tabbar/Profile.png" height="20" width="20">
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
  </div>

</template>

<script>
import TabBar from "./components/tabbar/TabBar";
import TabBarItem from "./components/tabbar/TabBarItem";
export default {
  name: 'App',
  components:{
    TabBar,
    TabBarItem
  },
  data(){
    return{
    }
  },
  methods:{

  }
}
</script>

<style >

</style>

tabbaritem.vue

<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-act"></slot></div>
<!--    <div v-bind:class="{isSelect:isActive}"><slot name="item-text"></slot></div>-->
    <div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</template>

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

<style scoped>
*{
  padding: 0;
  margin: 0;
}

.tab-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
  background-color: #f6f6f6;
  font-size: 14px;
  margin-top: 3px;
  vertical-align: middle;
}
.activeColor{
  color: red;
}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
const home = () => import('../views/home/home')
const index = () => import('../views/index/index')
const cart = () => import('../views/cart/cart')
const category = () => import('../views/category/category')
Vue.use(Router)
const routes = [
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:home
  },
  {
    path:'/index',
    component:index
  },{
    path:'/cart',
    component:cart
  },{
    path:'/category',
    component:category
  },
]
const router = new Router({
  routes,
  mode:"history"
})
export default router