vue学习记录 coderwhy d10

Posted 2022-12-09 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