uniapp 类似popover气泡下拉框组件

需要实现一个app端类似于elementUI上popover组件的下拉效果,发现uniapp和uview没找到合适的

以下组件仅测试过app,且细节处需要自行调整

描述: 点击更多按钮后弹出下拉框,点击其他区域会关闭下拉框

效果:

组件:

javascript 复制代码

<!-- 下拉菜单组件 -->
<template>
  <view class="custom-picker">
    <view class="picker-header" @click="togglePicker">
      更多
      <text class="arrow" :class="{ 'arrow-up': showPicker }"></text>
    </view>
    <view v-if="showPicker" class="picker-options">
      <view
        v-for="(item, index) in items"
        :key="index"
        @click="selectItem(item)"
        >{{ item.label }}</view
      >
    </view>
    <!-- 遮罩层，用于点击关闭 -->
    <view
      v-if="showPicker"
      class="mask"
      @click="closePicker"
      catchtouchmove
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showPicker: false,
      selectedItem: '',
    }
  },
  methods: {
    togglePicker() {
      this.showPicker = !this.showPicker
    },
    closePicker() {
      this.showPicker = false
    },
    selectItem(item) {
      this.selectedItem = item
      this.showPicker = false
      this.$emit('change', item)
    },
  },
}
</script>

<style scoped>
.custom-picker {
  position: relative;
  z-index: 100;
}
.picker-header {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.picker-options {
  position: absolute;
  width: 200rpx;
  top: 60rpx;
  left: -74rpx;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  z-index: 101;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.picker-options view {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.picker-options view:last-child {
  border-bottom: none;
}
.arrow {
  margin-left: 8rpx;
  width: 0;
  height: 0;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-top: 16rpx solid #ffffff;
  transition: transform 0.3s;
  position: relative;
  top: 2rpx;
}
.arrow-up {
  transform: rotate(180deg);
  top: -2rpx;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: transparent;
}
</style>

调用

javascript 复制代码

 <custom-picker :items="items" @change="onCustomPickerChange"></custom-picker>

 items: [
        { label: '删除' },
        { label: '详情' },
        { label: '停用' },
      ],

 onCustomPickerChange(e) {
      console.log(e)
    },