高亮对应路径的sider

爱读书的小杰鸟

已于 2023-10-30 15:37:15 修改

阅读量152

点赞数

文章标签： css 前端 javascript vue

于 2023-02-03 12:33:48 首次发布

本文链接：https://blog.csdn.net/Jaunty_Liu/article/details/128864292

版权

高亮对应路径的sider

在这里插入图片描述

<template>
    <div class="home">
        <div class="routers">
            <div
                v-for="(item, index) in myRouters"
                @click="changeRouter(item.path)"
                class="router"
                :key="item.path"
            >
                <div
                    :class="{
                        'img': true,
                        ['img'+(index+1)+'_act']: item.path == selectedKeys
                    }"
                    :id="'img'+(index+1)"
                ></div>
                <div
                    :class="{
                        'tit': true,
                        'tit_act': item.path == selectedKeys
                    }"
                >{{item.title}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router';
import { reactive, toRefs } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router';
export default {
    components: {
        CrownTwoTone
    },
    setup() {
        const myRouters = reactive([
            {
                title: "数据总览",
                path: "/home/index"
            },
            {
                title: "我的病人",
                path: "/home/"
            },
            {
                title: "病历管理",
                path: "/home/cases"
            },
            {
                title: "药物管理",
                path: "/home/"
            },
        ]);
        var res = reactive({
            selectedKeys: router.currentRoute.value.matched[1].path// 获取路径
        })
        function changeRouter(path) {
            router.push(path)
        }
        onBeforeRouteUpdate((to, from, next) => {
            res.selectedKeys = to.matched[1].path// 获取改变后的路径
            next()
        });
        return {
            myRouters,
            out,
            // 侧边栏
            ...toRefs(res),
            changeRouter,
        };
    }
}
</script>

<style scoped>
@import url('./Home.css');
</style>

.home .routers {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.home .routers .router {
  height: 3.4375rem;
  margin-left: -4.375rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.25rem;
  cursor: pointer;
}
.home .routers .router .img {
  width: 20px;
  height: 20px;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.home .routers .router #img1 {
  background-image: url('../../assets/Home/Dashboards.png');
}
.home .routers .router:hover #img1,
.home .routers .router .img1_act {
  background-image: url('../../assets/Home/Dashboards_act.png') !important;
}
.home .routers .router #img2 {
  background-image: url('../../assets/Home/Sick.png');
}
.home .routers .router:hover #img2,
.home .routers .router .img2_act {
  background-image: url('../../assets/Home/Sick_act.png') !important;
}
.home .routers .router #img3 {
  background-image: url('../../assets/Home/Case.png');
}
.home .routers .router:hover #img3,
.home .routers .router .img3_act {
  background-image: url('../../assets/Home/Case_act.png') !important;
}
.home .routers .router #img4 {
  background-image: url('../../assets/Home/Medicine.png');
}
.home .routers .router:hover #img4,
.home .routers .router .img4_act {
  background-image: url('../../assets/Home/Medicine_act.png') !important;
}
.home .routers .router #img5 {
  background-image: url('../../assets/Home/Out.png');
}
.home .routers .router:hover #img5,
.home .routers .router .img5_act {
  background-image: url('../../assets/Home/Out_act.png') !important;
}
.home .routers .router .tit {
  margin-left: 2.6875rem;
  color: #959BA2;
}
.home .routers .router:hover .tit,
.home .routers .router .tit_act {
  color: #007AFF;
  font-weight: 550;
}
.home .routers .router .tit_act:after {
  content: "";
  margin-top: -0.5938rem;
  position: absolute;
  right: 0;
  width: 0.4375rem;
  height: 3.125rem;
  border-radius: 6.25rem 0 0 6.25rem;
  background-color: #007AFF;
}