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

<feat>: 让tabbar通过slot支持weui的icon组件。 #155

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

ryouaki
Copy link

@ryouaki ryouaki commented Feb 5, 2021

目前tabbar的icon只支持图片,但是对于一些高级用法使用方希望使用icon组件。比如我。

目前weui内部icon组件很丰富。如果能让tabbar直接通过slot支持将会大大提高tabbar的可定制化能力。

@Tidyzq
Copy link
Contributor

Tidyzq commented Feb 22, 2021

首先感谢 PR!

@ryouaki
Copy link
Author

ryouaki commented Feb 22, 2021

@Tidyzq 目前单元测试跑不通,我看是 目前的 构建配置原因。并不是我修改的代码造成的。等这个测试能正常运行了。我补充一下测试用例。

@Tidyzq
Copy link
Contributor

Tidyzq commented Feb 22, 2021

小程序的 wxml 一直存在一个问题,就是他的 slot 不能够传递 slot props,从而达到类似 vue 中 slot-props 或 react 中 render function 的抽象效果。
在你这个 case 中,selected 是否选中这个状态其实是应该作为 slot props 传递给 slot 的,这里你选择了通过不同的 slot name 来区分,确实是一个思路。但是我在考虑,让开发者指定这么多的 slot name 是不是过于繁琐。例如 4 个 tab 需要指定 8 个 slot name。
或许这里最好的解决方法是将原本的 tabbar 拆分为 tabbar 和 tabbar-item 两个组件,通过 tabbar-item 来描述单个 tab,而不再是传递一个 list 数组来描述 tab 。再在 tabbar-item 里面指定 default 和 selected 两个 slot,这样可以避免让开发者取过多 slot name 的操作。

<wx-tabbar>
    <wx-tabbar-item>
        <wx-icon slot="default"/>
        <wx-icon slot="selected"/>
    </wx-tabbar-item>
</wx-tabbar>

不知这样的设计和你的相比如何?

@Tidyzq
Copy link
Contributor

Tidyzq commented Feb 22, 2021

@Tidyzq 目前单元测试跑不通,我看是 目前的 构建配置原因。并不是我修改的代码造成的。等这个测试能正常运行了。我补充一下测试用例。

这个问题应该是我之前修改了代码没有及时更新用例,我看下

@ryouaki
Copy link
Author

ryouaki commented Feb 22, 2021

在你这个 case 中,selected 是否选中这个状态其实是应该作为 slot props 传递给 slot 的,这里你选择了通过不同的 slot name 来区分,确实是一个思路。但是我在考虑,让开发者指定这么多的 slot name 是不是过于繁琐。例如 4 个 tab 需要指定 8 个 slot name。

是的,我就是发现不能像其他框架一样传递props,所以才想了这么个办法。目前的方式也是参考官方的demo和这个项目的example做的。如果拆成tabbar和tabbaritem固然好。看起来会更加清晰一些。

但是,那个时候,无论是库还是接入用户代码的复杂度都会上升。所以感觉不太值得。。。。。。ROI太低了。目前是一个比较简单直接的方式。

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

Successfully merging this pull request may close these issues.

2 participants