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
Comments
@vuehtml 请给出你期望的使用姿势 |
为了保持原有功能,建议新增一个作用域插槽item {{item.text}} |
@vuehtml 对应的 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> |
我目前就是这样用的,感觉超级不方便,三大缺点如下: 我仅仅是想给item修改一点点样式,结果却要付出这么大的精力。所以强烈建议,添加一个作用域插槽,既能避免上述三点恶心的操作,又可以轻松修改item的样式。 目前的vantui仅仅达到可用的标准,距离好用,还有很长的路要走。 例如van-dropdown-menu 还缺少一个自定义key的props属性,真实业务场景当中,option的key可不一定是value和text。当然一个map遍历就可以轻松转换key,但是这样操作浪费性能,尤其是在超级复杂的页面当中。 |
如果提供这个插槽,因为每个用户对样式修改程度的需求不一样,从通用性考虑,插槽会替换整个选项(当前选项是基于 Cell 组件封装的),所以选项的样式还是需要用户去实现。 |
如果提供这个插槽,因为每个用户对样式修改程度的需求不一样,从通用性考虑,插槽会替换整个选项,这句话错了,绝大多数场景,不会替换整个选项,只是对选项文字的样式做修改。 目前的傻大粗default插槽,样式可以自己实现,但是收起和折叠也不能用了,选中态的✔也不能用了,选中项的text也不能展示到title上了,太傻太僵硬了 带复选框的elementui的table组件都用过吧,单元格的横线和样式都还在,插槽修改的是单元格里面的dom样式,表格每行的复选框还在。DropdownMenu和ele-table组件何其相似 呀。这时候用作用域插槽就对了。 |
看着好像是要把当前子组件项的内容暴露给插槽?#scoped-slots |
这个功能解决了什么问题?
自定义下拉选择项,例如某项添加星标,变色等
你期望的 API 是什么样子的?
现有的titile插槽支持作用域就行
The text was updated successfully, but these errors were encountered: