[VUE小课堂]仿制淘宝网顶部导航栏组件

JS部分

const props = defineProps({
  nav_rightList: {
    type: Array
  },
})

// 划过事件
let showSubMenu = (id) => {
  const item = props.nav_rightList.find((item) => item.id === id);
  item.showSubMenu = true;
}
let hideSubMenu = (id) => {
  const item = props.nav_rightList.find((item) => item.id === id);
  item.showSubMenu = false;
}
// 点击事件，根据业务需求跳转
let toMypage = (e) => {
  emit('toMypage', e)
}
let toMypageChild = (e) => {
  emit('toMypageChild', e)
}

在这个例子中，我们使用v-for指令来循环遍历菜单项，并使用@mouseover和@mouseleave事件处理程序来显示和隐藏菜单项的子菜单。在方法中，我们查找与给定ID相对应的菜单项，并将其showSubMenu属性设置为true或false，从而显示或隐藏子菜单。

<template>
  <div>
    <div class="nav_wrap same">
      <div class="nav_left">
        <div
          class="left_item"
          v-for="item in nav_leftList"
          :key="item.id"
        >{{ item.name }} </div>
      </div>
      <div class="nav_right">
        <ul class="right_item">
          <li
            class="top1_txt"
            v-for="item in props.nav_rightList"
            :key="item.id"
            @mouseenter="showSubMenu(item.id)"
            @mouseleave="hideSubMenu(item.id)"
            @click="toMypage(item)"
          >
            {{ item.name }}
            <ul
              class="sub-menu"
              v-if="item.showSubMenu === true"
            >
              <li
                @click.stop="toMypageChild(item)"
                v-for="subItem in item.sub"
                :key="subItem.id"
              >{{ subItem.name }}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

CSS方面，我们使用display: none将子菜单隐藏，并在鼠标悬停在菜单项上时，将其显示为display: block。

请注意，此示例中使用了一些基本样式。您可以根据需要进行调整。

.left_item {
  cursor: pointer;
  padding: 0 10px;
}

.left_item:hover {
  color: rgb(255, 123, 0);
}

.nav_right {
  display: flex;
  justify-content: flex-end;
  margin-left: 25%;

  .sub-menu {
    display: none;
    position: absolute;
    top: 40px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 7;
    animation: scale-up-ver-top .4s cubic-bezier(.39, .575, .565, 1.000) both
  }

  li:hover .sub-menu {
    transition: all 0.5s;
    display: block;
  }

  .right_item {
    display: flex;

    li {
      cursor: pointer;
      padding: 0 10px;
    }

    .top1_txt:hover {
      color: rgb(255, 123, 0);
    }
  }
}