更新记录

1.0.0（2025-11-20） 下载此版本

简易的下拉菜单，支持列表选择，支持自定义内容

平台兼容性

uni-app(4.41)

下拉菜单

1.使用方法1，传列表

<es-dropdown-menu>
    <es-dropdown-item v-model="_d.form.a1" title="层次" :options="_d.list1" @change="pageLoad()"></es-dropdown-item>
</es-dropdown-menu>
<script setup>
import {reactive} from "vue";

const _d = reactive({
    form: {
        a1: undefined
    },
    list1: [
        {label: '层次1', value: 1},
        {label: '层次2', value: 2},
        {label: '层次3', value: 3},
    ]
})

</script>

2.使用方法2，自定义内容

// 注意：es-dropdown-item下面的<view>可以设置高度100%，然后添加scroll-view组件滚动。
<es-dropdown-menu>
    <es-dropdown-item ref="sxRef" title="筛选">
        <view class="sx-box">
            <view class="row">
                <view class="label">包邮</view>
                <view class="value">
                    <switch v-model="_d.form.a10"></switch>
                </view>
            </view>
            <view class="row">
                <view class="label">团购</view>
                <view class="value">
                    <switch v-model="_d.form.a11"></switch>
                </view>
            </view>
            <button type="primary" @click="handleOk()">确认</button>
        </view>
    </es-dropdown-item>
</es-dropdown-menu>
<script setup>
import {ref, reactive} from "vue";
const sxRef = ref();

const _d = reactive({
    a10: false,
    a11: false
})

const handleOk = () => {
    sxRef.value.toggle();
}
</script>
<style lang="scss" scoped>
.sx-box {
    padding: 20rpx;
    .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        height: 100rpx;
    }
    button {
        margin-top: 40rpx;
        border-radius: 46rpx;
    }
}   
</style>