weui-miniprogram icon indicating copy to clipboard operation
weui-miniprogram copied to clipboard

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

Open ryouaki opened this issue 4 years ago • 5 comments

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

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

ryouaki avatar Feb 05 '21 09:02 ryouaki

首先感谢 PR!

Tidyzq avatar Feb 22 '21 05:02 Tidyzq

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

ryouaki avatar Feb 22 '21 05:02 ryouaki

小程序的 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 avatar Feb 22 '21 05:02 Tidyzq

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

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

Tidyzq avatar Feb 22 '21 05:02 Tidyzq

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

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

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

ryouaki avatar Feb 22 '21 07:02 ryouaki