Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DropdownMenu非常实用的一个功能,需要一个作用域插槽的支持 #12551

Open
vuehtml opened this issue Jan 8, 2024 · 8 comments

Comments

@vuehtml
Copy link

vuehtml commented Jan 8, 2024

这个功能解决了什么问题?

自定义下拉选择项,例如某项添加星标,变色等

你期望的 API 是什么样子的?

现有的titile插槽支持作用域就行

@nemo-shen
Copy link
Contributor

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

@vuehtml
Copy link
Author

vuehtml commented Jan 9, 2024

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

{{item.text}}

@vuehtml
Copy link
Author

vuehtml commented Jan 9, 2024

作用域插槽item

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

@nemo-shen
Copy link
Contributor

nemo-shen commented Jan 9, 2024

@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
Copy link
Author

vuehtml commented Jan 11, 2024

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

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

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

@inottn
Copy link
Collaborator

inottn commented Jan 15, 2024

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

@vuehtml
Copy link
Author

vuehtml commented Jan 15, 2024

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

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

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

@RSS1102
Copy link
Contributor

RSS1102 commented Jan 15, 2024

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants