pad端侧边导航栏二级菜单

updatafiles.banmag.cn//2024-03-13 14-42-17.mp4 （复制链接到浏览器可以打开）

html代码

 <div class="side">
      <ul class="sidebar">
        <li
          class="sidebar-item"
          :class="{ activeIndex: index === findIndex &&  !item.children}"
          v-for="(item, index) in NavList"
          :key="item"
          @click="toPath(item, index)"
        >
          <div>{{ item.title }}</div>
          <div class="second"  v-show="index === findIndex" v-for="(v, i) in item.children"
          :class="{activeIndex: i === currentIndex}" :key="v" 
           @click="toBuild(v, i)"
          >{{v.title}}</div>
        </li>
      </ul>
    </div>

css代码

.side {
  position: fixed;
  // top: 50;
  left: 0;
  margin-left: 10px;
  // padding-top: 80px;
  width: 120px;
  height: 100vh;
  background-color: #071b2e;
  border: 1px solid #13fffc;

  .sidebar {
    z-index: 100;
    width: 120px;
    height: 100vh;
    .sidebar-item {
      width: 120px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      font-size: 18px;
      color: #fff;
      .second {
        width: 120px;
        height: 30px;
        // background: radial-gradient(#13fffc, #ffffff00, #ffffff00);
        line-height: 30px;
        font-size: 16px;
      }
    }
    a {
      text-decoration: none;
      color: #000000;
    }
    // .sidebar-item:hover {
    //   background: linear-gradient(#177290, #15559e);
    //   color: #fff;
    // }
  }
}
.activeIndex {
  background: radial-gradient(#13fffc, #ffffff00, #ffffff00);
  color: #fff;
}

js代码

let NavList = reactive([
  {
    title: "监控中心",
    url: "/monitoring",
    icon: "@/assets/img/patrolInfo.png",
  },
  {
    title: "栋舍列表",
    url: "/listOfBuildings",
    icon: import("@/assets/img/patrolInfo.png"),
    children: [
      {
        title: "栋舍一",
      },
      {
        title: "栋舍二",
      },
      {
        title: "栋舍三",
      },
    ],
  },
]);

const headlineText = ref("空气净化监测系统");
const router = useRouter();
const findIndex = ref(0);
const toPath = (item, index) => {
  router.push({
    path: item.url,
  });
  findIndex.value = index;
  if(item.title == '栋舍列表') {
    headlineText.value = item.children[currentIndex.value].title || item.children[0].title;
  }else {
    headlineText.value = '空气净化监测系统';
  }
};

const currentIndex = ref(0)
const toBuild = (v, i) => {
  currentIndex.value = i
}

欢迎指点和指正