vue自己实现下拉导航

Vue 实现下拉导航的方法

使用 v-show 或 v-if 控制显示

在 Vue 中可以通过 v-show 或 v-if 指令控制下拉菜单的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM，适合不频繁切换的场景。

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">菜单</button>
    <ul v-show="isOpen">
      <li><a href="#">选项1</a></li>
      <li><a href="#">选项2</a></li>
      <li><a href="#">选项3</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown ul {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}
</style>

使用事件修饰符处理点击外部关闭

通过 @click.outside 修饰符（需 Vue 3）或自定义指令实现点击下拉菜单外部区域时关闭菜单。

<template>
  <div class="dropdown" v-click-outside="closeDropdown">
    <button @click="toggleDropdown">菜单</button>
    <ul v-show="isOpen">
      <li><a href="#">选项1</a></li>
      <li><a href="#">选项2</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  directives: {
    'click-outside': {
      mounted(el, binding) {
        el.clickOutsideEvent = (event) => {
          if (!el.contains(event.target)) {
            binding.value();
          }
        };
        document.addEventListener('click', el.clickOutsideEvent);
      },
      unmounted(el) {
        document.removeEventListener('click', el.clickOutsideEvent);
      }
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    closeDropdown() {
      this.isOpen = false;
    }
  }
};
</script>

使用过渡动画增强体验

通过 Vue 的 <transition> 组件为下拉菜单添加动画效果，提升用户体验。

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">菜单</button>
    <transition name="fade">
      <ul v-show="isOpen">
        <li><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
      </ul>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

封装为可复用组件

将下拉菜单封装为可复用的组件，通过 props 接收菜单项数据，通过 emit 触发事件。

<!-- Dropdown.vue -->
<template>
  <div class="dropdown" v-click-outside="close">
    <button @click="toggle">{{ buttonText }}</button>
    <transition name="fade">
      <ul v-show="isOpen">
        <li v-for="(item, index) in items" :key="index">
          <a href="#" @click.prevent="selectItem(item)">{{ item.label }}</a>
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    },
    buttonText: {
      type: String,
      default: '菜单'
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    close() {
      this.isOpen = false;
    },
    selectItem(item) {
      this.$emit('select', item);
      this.close();
    }
  }
};
</script>

响应式设计与无障碍支持

确保下拉菜单在移动设备和键盘操作下可用，遵循无障碍标准。

<template>
  <div class="dropdown">
    <button 
      @click="toggleDropdown"
      @keydown.esc="closeDropdown"
      @keydown.down="focusNextItem"
      aria-haspopup="true"
      :aria-expanded="isOpen"
    >
      菜单
    </button>
    <ul v-show="isOpen" role="menu">
      <li 
        v-for="(item, index) in items"
        :key="index"
        role="menuitem"
        tabindex="-1"
        @keydown.up="focusPrevItem(index)"
        @keydown.down="focusNextItem(index)"
      >
        <a href="#">{{ item.label }}</a>
      </li>
    </ul>
  </div>
</template>

通过以上方法，可以灵活实现 Vue 下拉导航功能，并根据需求扩展交互和样式。