vue3 头部菜单下拉

解决方案

在 Vue 3 中实现头部菜单下拉效果，通常有多种方式可以达成。一种是利用原生的 HTML <select> 标签配合 Vue 的 v-model 指令来快速实现简单的下拉选择；另一种则是使用更灵活的方式，通过自定义组件和事件监听，结合 CSS 实现一个美观且交互性强的下拉菜单。这两种思路，并给出相应的代码示例。

基于 select 标签的简单实现

对于一些只需要简单选择功能的场景，直接使用 <select> 标签是非常方便的。下面是一个基本的例子：

html

  <header>
    <div class="menu">
      <label for="dropdown">选择菜单:</label>
      
        请选择
        {{ option.text }}
      
    </div>
  </header>
</p>


import { ref } from 'vue';

export default {
  setup() {
    const selectedOption = ref('');
    const options = [
      { text: '选项1', value: '1' },
      { text: '选项2', value: '2' },
      { text: '选项3', value: '3' }
    ];

    return {
      selectedOption,
      options
    };
  }
};



.menu {
  display: flex;
  align-items: center;
  padding: 10px;
}


<p>

这段代码创建了一个包含三个选项的下拉菜单，用户可以选择其中一个选项，并且可以通过 v-model 双向绑定选中的值到 selectedOption。

自定义组件实现复杂下拉菜单

当需要更加复杂的交互逻辑或者样式定制时，我们可以创建一个自定义组件来实现下拉菜单。这里我们将展示如何创建一个带有悬停显示子菜单的导航栏。

HTML & Template

html <template> <header> <nav> <ul class="nav-list"> <li v-for="(item, index) in navItems" :key="index" @mouseover="showDropdown(index)" @mouseleave="hideDropdown()"> <a href="#" rel="external nofollow" rel="external nofollow" >{{ item.title }}</a> <ul v-if="item.children && item.showDropdown" class="dropdown-menu"> <li v-for="(child, childIndex) in item.children" :key="childIndex"> <a href="#" rel="external nofollow" rel="external nofollow" >{{ child }}</a> </li> </ul> </li> </ul> </nav> </header> </template>

Script

javascript</p>


import { ref } from 'vue';

export default {
  setup() {
    const navItems = ref([
      {
        title: '首页',
        children: null,
        showDropdown: false
      },
      {
        title: '产品',
        children: ['产品1', '产品2', '产品3'],
        showDropdown: false
      },
      // 更多菜单项...
    ]);

    const showDropdown = (index) => {
      navItems.value.forEach((item, i) => {
        if (i === index && navItems.value[i].children) {
          navItems.value[i].showDropdown = true;
        } else {
          navItems.value[i].showDropdown = false;
        }
      });
    };

    const hideDropdown = () => {
      navItems.value.forEach((item) => {
        item.showDropdown = false;
      });
    };

    return {
      navItems,
      showDropdown,
      hideDropdown
    };
  }
};


<p>

CSS

css</p>


.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-list li {
  position: relative;
  margin-right: 20px;
}

.nav-list a {
  text-decoration: none;
  color: black;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  display: none;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-menu li {
  padding: 12px 16px;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

.nav-list li:hover .dropdown-menu {
  display: block;
}


<p>