DropdownMenu非常实用的一个功能，需要一个作用域插槽的支持 about vant

[nemo-shen]

@vuehtml 请给出你期望的使用姿势

[vuehtml]

为了保持原有功能，建议新增一个作用域插槽item

{{item.text}}

[vuehtml]

为了保持原有功能不受影响，建议新增一个item作用域插槽

[nemo-shen]

@vuehtml
emmm, 事实上 <VanDropdownItem /> 目前就已经支持插槽了，你可以看文档的 DropdownItem Slots 部分，

对应的 demo 是 自定义菜单内容

你提供的代码我给你改写下

<script setup lang="ts">
import { ref } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

const item = ref<DropdownItemInstance>();

type Item = { text: string; level: number };

const option1 = ref<Item[]>([
  { text: '包邮', level: 1 },
  { text: '团购', level: 2 },
]);

const selectedItem = ref<Item>(option1.value[0]);

const onConfirm = (it: Item) => {
  item.value?.toggle();
  selectedItem.value = it;
};
</script>

<template>
当前选中item: {{ selectedItem }}
<van-dropdown-menu>
  <van-dropdown-item ref="item" title="筛选">
    <p
      v-for="(item, index) in option1"
      :key="index"
	  :class="['version-item', { 'padding-level': item.level === 2 }]"
      @click="onConfirm(item)"
    >
      {{ item.text }}
    </p>
  </van-dropdown-item>
</van-dropdown-menu>
</template>

[vuehtml]

我目前就是这样用的，感觉超级不方便，三大缺点如下：
1：要自己通过ref获取dom，手动触发toggle控制下拉框的显示和隐藏；
2：下拉框的全部样式要自己去写，费时间和精力，本想用组件样式就刚刚好；
3：选中态也要自己去实现，另外选中value对应的text也要自己去数组中查找到，通过title属性展示出来。

我仅仅是想给item修改一点点样式，结果却要付出这么大的精力。所以强烈建议，添加一个作用域插槽，既能避免上述三点恶心的操作，又可以轻松修改item的样式。

目前的vantui仅仅达到可用的标准，距离好用，还有很长的路要走。 例如van-dropdown-menu 还缺少一个自定义key的props属性，真实业务场景当中，option的key可不一定是value和text。当然一个map遍历就可以轻松转换key，但是这样操作浪费性能，尤其是在超级复杂的页面当中。

[inottn]

如果提供这个插槽，因为每个用户对样式修改程度的需求不一样，从通用性考虑，插槽会替换整个选项（当前选项是基于 Cell 组件封装的），所以选项的样式还是需要用户去实现。

[vuehtml]

如果提供这个插槽，因为每个用户对样式修改程度的需求不一样，从通用性考虑，插槽会替换整个选项，这句话错了，绝大多数场景，不会替换整个选项，只是对选项文字的样式做修改。

目前的傻大粗default插槽，样式可以自己实现，但是收起和折叠也不能用了，选中态的✔也不能用了，选中项的text也不能展示到title上了，太傻太僵硬了

带复选框的elementui的table组件都用过吧，单元格的横线和样式都还在，插槽修改的是单元格里面的dom样式，表格每行的复选框还在。DropdownMenu和ele-table组件何其相似 呀。这时候用作用域插槽就对了。

[RSS1102]

如果提供这个插槽，因为每个用户对样式修改程度的需求不一样，从通用性考虑，插槽会替换整个选项（当前选项是基于 Cell 组件封装的），所以选项的样式还是需要用户去实现。

看着好像是要把当前子组件项的内容暴露给插槽？#scoped-slots