更新记录

1.0.9（2024-11-05） 下载此版本

新增：ref实例close事件，可用于主动控制下拉框收缩

1.0.8（2023-11-23） 下载此版本

*修复：异步加载数据时，默认下标为0时无法选中

1.0.7（2023-10-09） 下载此版本

*修复：异步加载数据时，默认下标下标为0时无法选中

平台兼容性

um-dropdown

下拉菜单

说明

um-dropdown 是基于uni-app生态的一款下拉菜单组件，可自定义文本框样式，列表类容支持数组，数组内可使用object类型

使用方法

符合uni-app的插件模块化规范配置，直接引用即可。

<template>
    <view style="width: 100px;height: 100px;">

        <um-dropdown @change="fnChange" rangeKey="label" :optionList="listData" selectedItemStyle="color:2973F8;"></um-dropdown>

    </view>
</template>
<script>
    export default {
        data() {
            return {
                optionVal: '', // 选中列表的值
                listData: [ // 列表数据
                    {
                        label: '北京',
                        value: '1',
                    },
                    {
                        label: '上海',
                        value: '2',
                    },
                    {
                        label: '重庆',
                        value: '3',
                    },
                    {
                        label: '成都',
                        value: '4',
                    }
                ]
            }
        },

        methods: {
            // 列表选中时触发事件，带出选中的值
            fnChange(e) {
                this.optionVal = e
            }
        }
    }
</script>

Props

Events

ref实例可调用事件

平台差异

其它说明

关于点击插件外部区域主动收缩下拉框的问题： H5环境下是支持的，其它平台因为缺少相关事件所以暂无解决方案。 最新版中添加了ref实例close事件，可用于主动控制下拉框收缩。 在有多个下拉框的情况下，点击其中一个下拉框可以调用close事件主动关闭其它下拉菜单。 还有就是采用遮罩的方案，经过尝试并不那么完美，期待后续能解决。

<template>
    <view>
        <um-dropdown ref="men1" @click="closeMenue2"></um-dropdown>
        <um-dropdown ref="men2" @click="closeMenue1"></um-dropdown>
    </view>
</template>
<script>
    export default {
        methods: {
            // 关闭第一个菜单
            closeMenue1() {
                this.$refs.men1.close()
            },
            // 关闭第二个菜单
            closeMenue2() {
                this.$refs.men2.close()
            }
        }
    }
</script>

交流反馈

留言信息无法实时查看，如需及时交流和反馈可加入QQ群：368365360