Vue学习之vue-tabbar

tabbar基本结构的搭建

1.首先创建两个子组件，子组件一是底部最外层div，组件二是小div（图片和文字）

（1）、子组件一用普通插槽

<template>
    <div class="tab-bar">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name:"tabar",  
}

</script>
<style scoped>
</style>
//封装最大的组件

（2）、子组件二用具名插槽（使用props接收根组件传进来的数据，使用计算属性获取判断点击时图片转换和颜色转换，$router获取路由）

<template>
    <div class="tab-bar-item"  @click="itemclick">
        <div v-if="!itemjudge"><slot name="item-ioc-1"></slot></div>
        <div v-else><slot  name="item-ioc"></slot></div>
        <div :style="itemstype"><slot name="item-txt"></slot></div>
    </div>
</template>

<script>
export default {
    name:'tabaritem',
    props:{
        pa:String,//动态获取根组件传来的路由路径
        ba:{//动态获取根组件传来的颜色属性
            type:String,
            default:'red'
        }
    },
    data(){
        return{
            //judge:this.$route.path.indexOf(this.pa)!=-1,
        }
    },
    computed:{//计算属性
        itemjudge(){//动态判断点击按钮时图片颜色的显示
            return this.$route.path.indexOf(this.pa)!=-1
        },
        itemstype(){//动态判断点击按钮时文字颜色的显示
            return this.itemjudge?{color:this.ba}:{}
        }
    },
    methods:{
        itemclick(){//显示路由路径和路由相关内容
            this.$router.replace(this.pa)
        }
    }
}
</script>

<style>
</style>
//封装每一个小按钮组件

2、根组件中（导入两个组件和css文件，导入css文件时必须@import "./assets/css/base.css"形式，这样的话想动态加几按钮时再添加tabbaritem组件就可以了，点击时想让按钮文字变什么颜色，就变什么颜色）

<template>
  <div id="app">
    <router-view/>
    <ta-b-bar>
      <tabbaritem  pa="/home" ba="pink">//如果是动态数据的话v-bind绑定,如果是字符串的话不用v-bind，pa是路由，ba：点击时文字的颜色
        <img slot="item-ioc-1" src="./assets/img/tab/3.1.png" alt="">
        <img slot="item-ioc" src="./assets/img/tab/3.png" alt="">
        <div slot="item-txt">首页</div>
      </tabbaritem>
      <tabbaritem  pa="/category" ba="pink">
        <img slot="item-ioc-1" src="./assets/img/tab/2.1.png" alt="">
        <img slot="item-ioc" src="./assets/img/tab/2.png" alt="">
        <div slot="item-txt">分类</div>
      </tabbaritem>
      <tabbaritem pa="/cart" ba="pink">
        <img slot="item-ioc-1" src="./assets/img/tab/1.1.png" alt="">
        <img slot="item-ioc" src="./assets/img/tab/1.png" alt="">
        <div slot="item-txt">购物车</div>
      </tabbaritem>
      <tabbaritem pa="/profile" ba="pink">
        <img slot="item-ioc-1" src="./assets/img/tab/4.1.png" alt="">
        <img slot="item-ioc" src="./assets/img/tab/4.png" alt="">
        <div slot="item-txt">我的</div>
      </tabbaritem>
    </ta-b-bar>
  </div>
</template>

<script>
import TaBBar from './components/tab/tabar.vue'
import tabbaritem from './components/tab/tabaritem.vue'

export default {
  name: 'App',
  components: {
    TaBBar,
    tabbaritem
  }
}
</script>

<style>
@import "./assets/css/base.css"
</style>

路径问题：

在webpack.base.conf.js中有一个 定义了一个src文件夹的简称

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
    }
  },

在以后的所有的开发时src文件夹下的所有文件需要路径时都可以用@代替././之类的

例子：

<img slot="item-ioc-1" src="@/assets/img/tab/1.1.png" alt="">

 

 

六、效果图