pointsMall/src/components/AppSidebar.vue

<template>
    <div class="index-nav" :class="{'index-nav-top':isActive}">
        <nav class="side-navigator-wrap">
            <div v-for="(item,index) in sideBarList" :key="index" class="nav-item-wrap">
                <div @click="removeTab" class="nav-item-content" :class="{ active: item.checked }">
                    <router-link :to="item.path" class="nav-item">
                        <i :class="item.icon"></i>
                        <span class="nav-item-text">{{ item.name }}</span>
                    </router-link>
                </div>
            </div>
        </nav>
    </div>
    
</template>
<script>
import { removeTab } from '@/utils/auth'
export default {
  name: 'AppSidebar',
  data() {
    return {
        sideBarList:[
            {
                value:'pointsMall',
                name:'积分商城',
                path:'/home/pointsMall',
                icon:'icon-mall-jifenshangcheng',
                checked:false,
            },
            {
                value:'index',
                name:'最新通知',
                path:'/home/index',
                icon:'icon-mall-tongzhi',
                checked:false,
            },
            {
                value:'signIn',
                name:'每日签到',
                path:'/home/signIn',
                icon:'icon-mall-qiandao',
                checked:false,
            },
            {
                value:'festiveEvents',
                name:'活动列表',
                path:'/home/festiveEvents',
                icon:'icon-mall-huodong',
                checked:false,
            },
            {
                value:'myMedal',
                name:'我的勋章',
                path:'/home/myMedal',
                icon:'icon-mall-xunzhang',
                checked:false,
            },
            {
                value:'commend',
                name:'员工表彰',
                path:'/home/commend',
                icon:'icon-mall-xunzhang',
                checked:false,
            },
            {
                value:'welfareList',
                name:'福利领取',
                path:'/home/welfareList',
                icon:'icon-mall-hongbao',
                checked:false,
            },
            {
                value:'myCenter',
                name:'个人中心',
                path:'/home/myCenter',
                icon:'icon-mall-gerenzhongxin',
                checked:false,
            },
            {
                value:'earnPoints',
                name:'积分获取',
                path:'/home/earnPoints',
                icon:'icon-mall-zuorenwuzhuanjifen',
                checked:false,
            },
            // {
            //     value:'citeList',
            //     name:'表彰上传',
            //     path:'/home/citeList',
            //     icon:'icon-mall-zuorenwuzhuanjifen',
            //     checked:false,
            // },
        ],
        employeeDynamics: false,
        pointsMall: false,
        welfareList: false,
        festiveEvents: false,
        isActive:false,
    };
  },
  methods:{
    removeTab(){
        removeTab();
    },
    getRoute(){
        var path = this.$route.path;
        this.sideBarList.forEach(item => {
            if(path.indexOf(item.value) != -1){
                item.checked = true;
            } else{
                item.checked = false;
            }     
        });
    },
    // 保存滚动值，这是兼容的写法
    handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop >= 80){
            this.isActive = true
        }else{
            this.isActive = false
        }
    },
  },
  watch: {
    $route:'getRoute'
  },
  created() {
    this.getRoute();
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },

  destroyed () {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style scoped>
.index-nav{
  width: 180px;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    margin-right: 20px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 4px;
    background-color: #fff;
    max-height: calc(100vh - 101px);
    /* overflow-x: hidden; */
}
.index-nav-top{
    top: 20px;
    max-height: calc(100vh - 40px);
}
li a {
    font-weight: bold;
    color: #515767;
}

li a.router-link-active {
    color: #1e80ff;
}
.side-navigator-wrap{
    min-width: 180px;
    box-sizing: border-box;
    padding: 8px;
    font-size: 16px;
    color: #515767;
}
.nav-item-wrap{
    display: flex;
    flex-direction: column;
}
.nav-item-content{
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.active{
    background-color: #eaf2ff;
    color: #1e80ff;
    font-weight: 500
}
.nav-item{
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 10px 17px;
}
.nav-item i{
    vertical-align: middle;
    margin-right: 12px;
}
.nav-item-text{
    vertical-align: middle;
    position: relative;
}
</style>