varletjs / varlet

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
https://varletjs.org/#/en-US/index
MIT License
4.89k stars 619 forks source link

折叠面板collapse中使用tabs和tabItem出现bug #1016

Closed AnyFork closed 1 year ago

AnyFork commented 1 year ago

Bug report 🐞

在折叠面板中使用tabs,页面首次加载,激活的tab底部没有indicator,其宽度为0,点击其他tab,切换回来正常,同时在底部联动var-tab-item宽度为0 image 代码如下:

<var-collapse v-model="value" accordion :offset="false" elevation="0">
            <var-collapse-item title="China(中国)" name="1" class="relative w-full">
                <var-divider margin="0" />
                <div class="relative w-full">
                    <var-tabs v-model:active="active">
                        <var-tab name="America">美洲</var-tab>
                        <var-tab name="Asia">亚洲</var-tab>
                        <var-tab name="Australia">澳洲</var-tab>
                        <var-tab name="Europe">欧洲</var-tab>
                    </var-tabs>
                    <var-tabs-items v-model:active="active" class="w-full" :can-swipe="false">
                        <var-tab-item name="America" class="w-full">
                            呜啦啦啦火车笛,随着奔腾的马蹄。 小妹妹吹着口琴,夕阳下美了剪影。 我用子弹写日记,介绍完了风景。
                            接下来换介绍我自己。 我虽然是个牛仔,在酒吧只点牛奶。 为什么不喝啤酒,因为啤酒伤身体。
                        </var-tab-item>
                        <var-tab-item class="w-full">
                            很多人不长眼睛,嚣张都靠武器。 赤手空拳就缩成蚂蚁。 不用麻烦了,不用麻烦了。 不用麻烦,不用麻烦了,不用麻烦了。
                        </var-tab-item>
                        <var-tab-item name="Asia" class="w-full">
                            你们一起上,我在赶时间。 每天决斗观众都累了,英雄也累了。 不用麻烦了,不用麻烦了。
                            副歌不长你们有几个,一起上好了。 正义呼唤我,美女需要我。 牛仔很忙的。
                        </var-tab-item>
                    </var-tabs-items>
                </div>
            </var-collapse-item>
            <var-collapse-item title="标题" name="2">文本</var-collapse-item>
        </var-collapse>

Version & Environment

"@varlet/ui": "2.10.2"

Expectation

Actual results (or Errors)

BeADre commented 1 year ago

2.10.3-alpha.1683532936621升级一下,然后在collapse展开的时候手动调用一下tabs-items的resize方法:

let hasResize = false

const change = (val) => {
    if (val && !hasResize) {
        hasResize = true
        requestAnimationFrame(TabsItem.value.getSwipe().resize)
    }
}

// ...

<var-collapse v-model="value" @change="change">
    <var-collapse-item title="China(中国)" name="1">
        <var-tabs-items v-model:active="active" ref="TabsItem">
        // ...
        </var-tabs-items>
    </var-collapse-item>
</var-collapse>
AnyFork commented 1 year ago

采用上面的方法可以实现tabs-items自适应,但collapse展开tabs默认激活的选项,indicator宽度依然为0,如下效果: image 上面是嵌套在collapse里面的,下面是fan放在外面的

AnyFork commented 1 year ago

image 采用相同的方法,可以解决tabs激活后indicator为0问题。