需要实现一个app端类似于elementUI上popover组件的下拉效果,发现uniapp和uview没找到合适的
以下组件仅测试过app,且细节处需要自行调整
描述: 点击更多按钮后弹出下拉框,点击其他区域会关闭下拉框
效果:
组件:
<!-- 下拉菜单组件 -->
<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"><viewv-for="(item, index) in items":key="index"@click="selectItem(item)">{{ item.label }}</view></view><!-- 遮罩层，用于点击关闭 --><viewv-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 = itemthis.showPicker = falsethis.$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>
调用
<custom-picker :items="items" @change="onCustomPickerChange"></custom-picker>items: [{ label: '删除' },{ label: '详情' },{ label: '停用' },],onCustomPickerChange(e) {console.log(e)},
