MoeNovaClient/components/DropdownMenu.vue

<template>
  <view class="dropdown-container">
    <view class="dropdown-trigger" @tap="toggleDropdown">
      <!--  -->
       <image src="@/static/icon/more2.png" style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;" mode="widthFix"></image>
    </view>
    <view class="dropdown-menu" v-if="show">
      <view 
        v-for="(item, index) in options" 
        :key="index"
        class="dropdown-item" 
        @tap="handleSelect(item)"
      >
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DropdownMenu',
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggleDropdown() {
      this.show = !this.show
    },
    handleSelect(item) {
      this.$emit('select', item)
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdown-container {
  position: relative;
  
  .dropdown-trigger {
    padding: 10rpx;
    cursor: pointer;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 200rpx;
    
    .dropdown-item {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      color: #333;
      text-align: center;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>