vant icon indicating copy to clipboard operation
vant copied to clipboard

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

Open vuehtml opened this issue 1 year ago • 8 comments

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

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

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

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

vuehtml avatar Jan 08 '24 06:01 vuehtml

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

nemo-shen avatar Jan 08 '24 12:01 nemo-shen

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

vuehtml avatar Jan 09 '24 06:01 vuehtml

作用域插槽item

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

vuehtml avatar Jan 09 '24 12:01 vuehtml

@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>

nemo-shen avatar Jan 09 '24 15:01 nemo-shen

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

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

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

vuehtml avatar Jan 11 '24 17:01 vuehtml

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

inottn avatar Jan 15 '24 03:01 inottn

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

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

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

vuehtml avatar Jan 15 '24 16:01 vuehtml

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

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

RSS1102 avatar Jan 15 '24 16:01 RSS1102