beelink/src/components/Menu.vue

<template>
    <div class="menu">
        <div class="user" style="overflow: hidden;">
            <div class="user" :class="{'seltop': selnum == 0}">
                <img :src="userinfo.head" alt="" class="head">
                <div class="name">{{userinfo.username}}</div>
            </div>
        </div>
        
        <div class="list">
            <div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)">
                <div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}">
                    <div class="route">
                        <img :src="i.icon" alt="" class="icon">
                        <div class="title">{{i.name}}</div>
                    </div>
                    <img alt="" src="../static/images/jiantou.png" class="right">
                </div>
            </div>
            <div style="overflow: hidden;">
                <div class="item" :class="{'selbottom': selnum == list.length - 1}"></div>
            </div>
            <div class="item loginout">
                <div class="route" @click="logout">
                    <img src="../static/images/tuichu.png" alt="" class="icon">
                    <div class="title">
                        帐号退出
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.menu{
    user-select: none;
    width: 171px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
    .user{
        width: 100%;
        height: 150px;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .head{
            width: 57px;
            height: 57px;
            margin-bottom: 15px;
            border-radius: 50%;
        }
        .name{
            font-size: 15rpx;
            line-height: 1;
            color: #fff;
        }

    }
    .list{
        position: relative;
        display: flex;
        height: 100%;
        padding-left: 6px;
        display: flex;
        flex-direction: column;
        .item{
            display: flex;
            align-items: center;
            height: 50px;
            padding: 0 18px;
            justify-content: space-between;
            .route{
                display: flex;
                .icon{
                    width: 15px;
                    height: 15px;
                }
                .title{
                    font-size: 13px;
                    color: #fff;
                    line-height: 1;
                    margin-left: 6px;
                }
            }
            .right{
                width: 5px;
                height: 10px;
            }
        }
        .loginout{
            position: absolute;
            bottom: 10px;
        }
    }
    .seltop{
        border-radius: 0 0 25px 0;
        box-shadow: 0 0 0 30px #f5f5f5 ;
    }
    .selbottom{
        border-radius: 0 25px 0 0;
        box-shadow: 0 0 0 30px #f5f5f5 ;
    }
    .selitem{
        border-radius: 25px 0 0 25px;
        background-color: #F5F5F5;
        .title{
            color: #08AE98 !important;    
            font-weight: bold;
        }
    }
}
</style>
<script lang="ts">
import router from '@/router';
import store from '@/store';
import { computed, defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    setup(){
        interface MenuItem {
            icon: string;
            sleicon: string;
            name: string;
            route: string;
        }
        // 左侧的列表数组
        const list: Array<MenuItem> = [
            {  
                icon: require("../static/images/wode1.png"),
                sleicon:"",
                name: "我的档案",
                route: "/mine/archives"
            },
            {  
                icon: require("../static/images/xiayig.png"),
                sleicon:"",
                name: "发布直播",
                route: "/mine/webcast"
            },
            {  
                icon: require("../static/images/shipin.png"),
                sleicon:"shipin.png",
                name: "上传视频",
                route: "/mine/video"
            },
            {  
                icon: require("../static/images/yinhangka.png"),
                sleicon:"",
                name: "我的钱包",
                route: "/mine/wallet"
            },
            {  
                icon: require("../static/images/tongji.png"),
                sleicon:"",
                name: "列表统计",
                route: "/mine/liststatistic"
            },
            {  
                icon: require("../static/images/bangzhu.png"),
                sleicon:"",
                name: "关于Beelink",
                route: "/mine/aboutus"
            }
        ]
        // 当前选中的index
        const selnum = ref(0);

        const userinfo = computed(() => store.state.userinfo)
        // 设置当前路由
        for(const i in list){
            if(list[i].route == useRoute().path){
                selnum.value = parseInt(i);
            }
        }
        /**
         * 跳转路由与赋值对应的下标
         * @param index 选中的下标 方便赋值与跳转
         */
        function routeto(index: number): void {
            console.log(index)
            selnum.value = index;
            router.push({
                path: list[index].route
            })

        }

        function logout(): void{
            store.commit("login", false)
            router.replace("/");
        }
      
        return{
            list,
            routeto,
            selnum,
            userinfo,
            logout
        }
    }
})
</script>