记录Vue（一）

<template>
    <footer ><!-- :class='{changeHT : changAct }' class="mFooter" -->
        <section class="imgCont fl">
             <ul class="ulBox fl">
                 <li @click="switchTo('/personInfo')">
                      <img alt="" :src="'/personInfo' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" >
                     <p  :class="{on: '/personInfo' === $route.path}">底部内容1</p>
                 </li>
                
                 <li @click="switchTo('/teachWorkOn')" >
                     <img  alt="" :src="teachActived ? tabBarImgArr[1].selected : tabBarImgArr[1].normal">
                     <p :class="{on:teachActived}">底部内容2</p>
                 </li>
                 
                 <li  @click="switchTo('/scienInfo')">
                     <img  alt="" :src="scienActived ? tabBarImgArr[2].selected : tabBarImgArr[2].normal">
                     <p :class="{on: scienActived }">底部内容3</p>
                 </li>
                 
                 <li @click="switchTo('/myWage')">
                      <img alt="" :src="'/myWage' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" >
                     <p  :class="{on: '/myWage' === $route.path}">底部内容4</p>
                 </li>
                 <!-- <li>
                     <img src="../images/other.png" alt="">
                     <p>其他业绩</p>
                 </li>
                 <li>
                     <img src="../images/perImg.png" alt="">
                     <p>公共服务</p>
                 </li> -->
             </ul>
             <div class="tipBox" hidden> <!-- @click="handFoter($event)" -->
                 <img src="../images/daohang.png" alt="">
             </div>
        </section>
    </footer>
</template>
<script>

  import storage from 'utils/storage'

    export default {
        data(){
            return {
                teachActived: false,
                scienActived: false,
                //changAct:false,改变footer高度
                tabBarImgArr:[   //图片切换
                    {normal: require('../images/perImg.png'), selected: require('../images/perImg_on.png')},
                    {normal: require('../images/teachWork.png'), selected: require('../images/teachWork_on.png')},
                    {normal: require('../images/scinInfo.png'), selected: require('../images/scinInfo_on.png')},
                    {normal: require('../images/myWage.png'), selected: require('../images/myWage_on.png')},
                ]
            }
        },
        methods:{
            switchTo(path){
            // console.log(this.$router)

              storage.set("selected_item_id",0); 
              storage.set("selected_id",0);
              this.$router.replace(path);
               console.log(this.$router);
            },
            //改变footer方法
            // handFoter(event){
            //      const mFooter = document.getElementsByClassName('mFooter')[0];
            //      mFooter.classList.add('changeHT')
            //      this.changAct = true;
            //      event.stopPropagation();
            // }
  
        },
        mounted () {
            if(this.$route.fullPath.includes('teachWorkOn')){
                   this.teachActived = true
            }
            if(this.$route.fullPath.includes('scienInfo')){
                   this.scienActived = true
            }
        },
        watch: {
            $route (route) {
                if(route.fullPath.includes('teachWorkOn')){
                   this.teachActived = true
                }
                if(route.fullPath.includes('scienInfo')){
                   this.scienActived = true
                }
                console.log(route);
            }
        }
    }
</script>
<style lang='scss' scoped>
    footer{
        width:calc(100% - 30px );float:left;background-color: #fff;position: fixed;z-index: 100;left: 0;right: 0;bottom: 0;border-top:1px solid #F4F4F4;height:50px;padding:0px 15px;
        section.imgCont{
            width:100%;float:left;position:relative;
            ul.ulBox{
                width:100%;float:left;
                li{
                    width:calc(100%/4 - 0px );float:left;margin-bottom:15px;
                    img{width:25px;height:22px;display: block;margin:8px auto 5px;}
                    p{width:100%;text-align: center;color:#333;font-size:12px;}
                    .on{color:#333;}
                }
            }
            div.tipBox{
                position:absolute;width:60px;height:30px;border-radius:30px 30px 0 0;background-color:#fff;border:1px solid #F4F4F4;top: -25%;
                left: 50%;margin-left: -30px;z-index:999;border-bottom:0px !important;
                img{width:17px;height:15px;margin: 9px 20px 9px 20px;}
            
            }
        }
    }
    footer.changeHT{height:150px;}
</style>