DropdownMenu 下拉菜单，用于弹出一个下拉菜单给用户选择操作。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 size 属性设置下拉菜单字体大小，selectedColor 属性设置下拉菜单字体选中后颜色，options 属性设置下拉菜单数据。 通过 ref 来注册组件引用信息。通过 this.$refs.xxx 访问到对应的组件实例，并调用上面的实例方法 show 来显示下拉菜单。 注意：页面上用于点击显示下拉菜单的布局内容放置于组件内部。如下所示：

<wui-dropdown-menu
        :minWidth="300"
        right="0"
        :size="28"
        selectedColor="#1396FF"
        isCheckMark
        checkmarkColor="#1396FF"
        isReverse
        :options="options"
        @click="rangeItemClick"
        @close="rangeClose"
        ref="ddmRangeRef"
>
    <view class="wui-filter__item" @tap="filterTap(1)">
        <text>{{ range }}</text>
        <view
                class="wui-filter__icon"
                :class="{ 'wui-icon__ani': rangeShow }"
        >
            <wui-icon name="w-turningdown" :size="32"></wui-icon>
        </view>
    </view>
</wui-dropdown-menu>

  const ddmRangeRef = ref<any>('false');
  const options = ref<any>([
    {
        text: '所有科室',
        value: 0,
        checked: true,
    },
    {
        text: '科室1',
        value: 1,
    },
    {
        text: '科室2',
        value: 2,
    },
    {
        text: '科室3',
        value: 3,
    },
    {
        text: '科室4',
        value: 4,
    },
    {
        text: '科室5',
        value: 5,
    },
]);
const filterTap = type => {
    if (type === 1) {
        ddmRangeRef.value.show();
        rangeShow.value = true;
    } else {
        ddmSortRef.value.show();
        sortShow.value = true;
    }
};
const rangeItemClick = e => {
    console.log(e);
    range.value = e.text;
    rangeClose();
};
const rangeClose = () => {
    rangeShow.value = false;
};

.wui-filter__item {
	width: 300rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
	background-color: #fff;
}

.wui-filter__icon {
	transition: all .15s linear;
}

.wui-icon__ani {
	transform: rotate(180deg);
}

Slots

插槽名称	说明
default	点击显示下拉菜单的布局内容

Props

属性名	类型	说明	默认值	平台差异说明
options	Array	下拉菜单数据，格式见下方说明	[ ]	-
maxHeight	Number, String	下拉菜单最大高度，单位rpx	400	nvue端此参数为实际高度height值
minWidth	Number, String	下拉菜单最小宽度，单位rpx	0	-
left	Number, String	下拉菜单left值，单位rpx	0	-
right	Number, String	下拉菜单right值，单位rpx。right大于等于0时生效，且left失效	-1	-
background	String	下拉菜单背景颜色	#fff	-
radius	Number, String	下拉菜单圆角值，部分平台若无效果则忽略该属性	0	-
padding	String	下拉菜单item项padding值	32rpx	-
isCheckbox	Boolean	是否显示选择框	true	-
checkboxColor	String	选择框选中后颜色	#465CFF	非Nvue端默认为空值，可通过css变量 ( --wui-color-primary ) 修改颜色值
borderColor	String	选择框未选中时边框颜色	#ccc	-
isCheckMark	Boolean	选择框是否只显示对号，无边框背景	false	-
checkmarkColor	String	选择框对号颜色	#fff	-
isReverse	Boolean	选择框与内容是否颠倒排列	false	-
splitLine	Boolean	下拉菜单每项间是否需要分割线	false	-
lineColor	String	分割线颜色	#eee	仅nvue端支持，非nvue端使用css变量（--wui-color-border）修改颜色值
iconWidth	Number, String	下拉菜单icon宽度，单位rpx。高度与宽度等长	48	-
size	Number, String	下拉菜单字体大小，单位rpx	32	-
color	String	下拉菜单字体颜色	#181818	-
selectedColor	String	下拉菜单字体选中后颜色	-	-
isMask	Boolean	是否需要遮罩层	true	-
maskBackground	String	遮罩层背景色	transparent	-
direction	String	下拉菜单展开方向，可选值：down、up	down	-

//options 数据格式说明
const options = ref<any>([
    {
        text: '所有科室',
        value: 0,
        checked: true,
    },
    {
        text: '科室1',
        value: 1,
    },
    {
        text: '科室2',
        value: 2,
    },
    {
        text: '科室3',
        value: 3,
    },
    {
        text: '科室4',
        value: 4,
    },
    {
        text: '科室5',
        value: 5,
    },
]);
//数据格式二，以下为约定属性，其他属性可自行增加
const options = ref<any>([
    {
        //下拉菜单item项显示文本，必选
        text: '默认排序',
        value: 11,
        //下拉菜单item项icon图片地址，可选
        src:'',
        //是否选中，可选
        checked: true,
    }
]);

Events

事件名	说明	回调参数
@click	点击下拉菜单item项时触发	{ index:按钮索引, ...this.options[index] }
@close	点击遮罩层时触发	-