dropdown-menu `v1.1.0`

向下弹出的菜单列表组件，默认情况下使用dict-dropdown-menu使用, 如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-dropdown-menu使用。

用于快速构建带数据字典的下拉选择器，支持双向数据绑定、自定义插槽及数据变化事件监听，适用于需要统一管理表单下拉选项的场景。

复制成功

00:00

组件结构

组件封装结构如下

vue

  <van-dropdown-menu ref="VanDropdownMenuRef">
  </van-dropdown-menu>

const VanDropdownMenuRef = ref(null)
const getVanDropdownMenuRef = () => {
  return VanDropdownMenuRef.value
}
defineExpose({ VanDropdownMenuRef })

属性、事件和插槽继承技巧

此组件引用了van-dropdown-menu一个组件，可直接继承原生属性、事件和插槽。

参数名	类型	默认值	说明
modelValue	Object	`{}`	双向绑定的表单值，键为 `data` 中配置的 `fieldName`，值为对应字段的选中值
data	Array	-	下拉菜单配置数组，每个元素为单个下拉项的配置（见下表）

data 数组中的每个元素为单个下拉项的配置，结构如下：

字段名	类型	说明
fieldName	String	必选，绑定到 `modelValue` 的键名，用于关联表单值
props	Object	必选，下拉项的属性配置，支持 Vant `dict-dropdown-item` 的所有属性（如 `title`、`options`、`disabled` 等），同时支持以下扩展属性：
props.slotList	Array	可选，自定义插槽配置数组，用于渲染下拉项内部的自定义内容（见「插槽配置」）

事件名	触发时机	回调参数
update:modelValue	表单值变化时（双向绑定自动触发）	当前表单值（`formData` 对象）
dictChange	下拉选项变更且确认时	当前表单值（`formData` 对象）

组件通过 defineExpose 暴露以下方法，可通过 ref 调用：

方法名	说明	返回值
getVanDropdownMenuRef	获取内部 Vant DropdownMenu 组件的 ref	Vant DropdownMenu 实例
getVanDropdownItemRefs	获取所有内部子项（DictDropdownItem）的 ref 数组	子项实例数组（按 `data` 配置顺序排列）

通过 data 中 item.props.slotList 可配置自定义插槽，用于在下拉项内部插入自定义内容。slotList 每个元素结构如下：

字段名	类型	说明
slotName	String	插槽名称（对应模板中的具名插槽，如 `before`、`after` 等）
render	Function,String	渲染函数，接收 `scope` 和 `formData` 参数，返回 VNode 或 DOM 结构