twin2025-mod/src/pages/components/SideMenu.vue

<template>
    <div>
        <div class="bigBox">
            <template v-for="(item, index) in menuList">
                <div class="menuBox" @click="routeBoxClick(item)">
                    <img :style="{ 'background': item.isChosen ? 'linear-gradient(138deg, #F1F3F9 0%, #F1F3F9 100%)' : 'none' }"
                        :src="item.isChosen ? item.isChoose : item.noChoose" class="rImg" alt="">
                    <p class="rp">{{ item.name }}</p>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import allImg from "../../../src/utils/allImg.js"
export default {
    setup() {
        let menuList = ref([
            {
                name: "检测任务",
                route: "/home/mission",
                id: 1,
                noChoose: allImg.searchGray,
                isChoose: allImg.searchBlue,
                isChosen: true
            },
            {
                name: "报告结果",
                route: "/home/report",
                id: 2,
                noChoose: allImg.reportGray,
                isChoose: allImg.reportBlue,
                isChosen: false
            },
            {
                name: "基础设置",
                route: "/home/setting",
                id: 3,
                noChoose: allImg.settingGray,
                isChoose: allImg.settingBlue,
                isChosen: false
            },
            {
                name: "系统管理",
                route: "/home/system",
                id: 4,
                noChoose: allImg.systemGray,
                isChoose: allImg.systemBlue,
                isChosen: false
            },
        ])//路由菜单
        let router = useRouter()//初始化路由实例
        let route = useRoute()//获取路由信息
        // 路由盒子
        function routeBoxClick(row) {
            // 设置所有菜单项的 isChosen 为 false
            menuList.value.forEach((item) => {
                item.isChosen = false;
            });
            // 设置当前点击的菜单项为 isChosen
            row.isChosen = true;
            router.push(row.route)
        }
        // 拿到路由信息
        function getRoute() {
            let path = route.path
            menuList.value.forEach(item => {
                item.isChosen = item.route === path;
            });
        }
        onMounted(() => {
            getRoute()
        })
        return {
            menuList,//路由菜单
            routeBoxClick,//路由盒子点击事件
            getRoute,//拿到路由信息
        }
    }
}
</script>

<style scoped>
p {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 95px;
    height: auto;
    margin: 0 auto;
    margin-top: 25px;
    overflow-y: hidden;
}

.menuBox {
    width: 80px;
    height: 60px;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    margin-bottom: 10px;
}

.rImg {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin: 0 auto;
    /* border-image: linear-gradient(171deg, rgba(215, 237, 255, 1), rgba(158, 210, 253, 1)) 0 0; */
}

.rp {
    width: 80px;
    height: 30px;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #1A2447;
    line-height: 22px;
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
}
</style>