uniapp使用下拉菜单

下面是使用uni-app实现下拉菜单的示例代码：

<template>
  <view>
    <button @click="toggleDropdown">{{ dropdownVisible ? '隐藏下拉菜单' : '显示下拉菜单' }}</button>
    <view v-if="dropdownVisible" class="dropdown-menu">
      <!-- 下拉菜单内容 -->
      <view class="dropdown-item" @click="selectItem('item1')">菜单项1</view>
      <view class="dropdown-item" @click="selectItem('item2')">菜单项2</view>
      <view class="dropdown-item" @click="selectItem('item3')">菜单项3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dropdownVisible: false,
      selectedItem: ''
    };
  },
  methods: {
    toggleDropdown() {
      this.dropdownVisible = !this.dropdownVisible;
    },
    selectItem(item) {
      this.selectedItem = item;
      this.dropdownVisible = false;
      // 执行选中菜单项后的逻辑
    }
  }
};
</script>

<style>
.dropdown-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}
</style>

这是一个简单的下拉菜单组件，点击按钮可以显示或隐藏下拉菜单。菜单项被点击后，会执行相应的逻辑。你可以根据自己的需求修改菜单项的内容和样式。