Vue 3 下拉菜单组件实现及解析

<template>
  <div class="dropdown">
    <button
      class="dropdown-selected"
      @click="isOpen = !isOpen"
      aria-haspopup="true"
      :aria-expanded="isOpen ? 'true' : 'false'"
    >
      {{ selected }}
    </button>
    <div
      class="dropdown-list"
      v-show="isOpen"
      aria-label="submenu"
    >
      <button
        v-for="(option, index) in options"
        :key="index"
        class="dropdown-item"
        @click="select(option)"
      >
        {{ option }}
      </button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isOpen: false,
      selected: 'Select an option',
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  },
  methods: {
    select(option) {
      this.selected = option;
      this.isOpen = false;
    }
  }
};
</script>
 
<style scoped>
.dropdown {
  position: relative;
  user-select: none;
  /* 其他样式 */
}
.dropdown-selected {
  width: 100%;
  /* 其他样式 */
}
.dropdown-list {
  position: absolute;
  /* 其他样式 */
}
.dropdown-item {
  /* 其他样式 */
}
</style>

这个简单的下拉菜单组件使用了Vue 3的模板语法和响应式数据绑定，以及一些基本的样式定义。它展示了如何创建一个可复用的下拉菜单，并且可以通过简单的配置来更改选项。这个例子也展示了如何处理用户界面的交互，如何打开和关闭下拉列表，以及如何处理用户的选择。