Vue.js 和 CSS 实现带下拉菜单的导航栏

<template>
  <div class='navbar'>
    <div class='logo'>
      <img src='logo.png' alt='Logo'>
    </div>
    <div class='links'>
      <div class='link' v-for='item in items' :key='item.title' @mouseover='showBox(item)' @mouseleave='hideBox(item)'>
        <div class='title'>{{item.title}}</div>
        <div class='box' v-show='item.showBox'>
          <div class='content' v-for='content in item.contents' :key='content.title' @click='handleClick(content)'>{{content.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        items: [
          {
            title: '简介',
            showBox: false,
            contents: [
              { title: '公司简介', link: '/about' },
              { title: '团队介绍', link: '/team' },
            ],
          },
          {
            title: '新闻中心',
            showBox: false,
            contents: [
              { title: '公司新闻', link: '/news' },
              { title: '行业动态', link: '/industry' },
            ],
          },
          {
            title: '制度公告',
            showBox: false,
            contents: [
              { title: '公司制度', link: '/policy' },
              { title: '公告通知', link: '/notice' },
            ],
          },
        ],
      };
    },
    methods: {
      showBox(item) {
        item.showBox = true;
      },
      hideBox(item) {
        item.showBox = false;
      },
      handleClick(content) {
        // 处理点击事件
      },
    },
  };
</script>
<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #eee;
}

.logo {
  width: 40%;
  text-align: center;
}

.links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 60%;
  height: 100%;
}

.link {
  position: relative;
  padding: 0 20px;
  height: 100%;
}

.title {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}
</style>
<p>上述代码中，<code>items</code> 数组表示导航栏中的各个链接，每个元素包含 <code>title</code> 表示标题，<code>showBox</code> 表示是否显示下拉框，<code>contents</code> 表示下拉框中的内容，包含 <code>title</code> 和 <code>link</code> 两个属性。</p>
<p>在模板中，使用 <code>v-for</code> 渲染每个链接，并绑定 <code>@mouseover</code> 和 <code>@mouseleave</code> 事件处理器来显示和隐藏下拉框。下拉框使用绝对定位并设置 <code>opacity</code> 和 <code>pointer-events</code> 属性来实现渐变显示和隐藏效果。</p>
<p>点击下拉框中的内容时，可以调用 <code>handleClick</code> 方法来处理点击事件。</p>