关于Tabs嵌套,如何判断底层tab是否处于激活状态呢? #13263
yuhengshen
started this conversation in
Ideas
Replies: 4 comments
-
例如,我将二级tab切换为其他,此时滚动到顶部的按钮应该隐藏,但是目前我在子组件中无法获取到,所属的tab是否全部被激活。 我只能获取父tab的激活状态,此时父级tab是激活的,但是再上级是非激活的状态。我应该隐藏这个按钮,目前无法做到。 |
Beta Was this translation helpful? Give feedback.
0 replies
-
想到了可以改动业务组件,重新注入 |
Beta Was this translation helpful? Give feedback.
0 replies
-
我的处理方式暂时是:
<script setup lang="ts">
import { Tab, TabProps } from "vant";
import { TAB_STATUS_KEY } from "vant/es/composables/use-tab-status";
import { ANCESTOR_TAB_STATUS_KEY } from "./const";
const props = defineProps<TabProps>();
const tabStatus = inject(TAB_STATUS_KEY, ref(true));
const allTabStatus = inject(ANCESTOR_TAB_STATUS_KEY, ref(true));
const newAllTabStatus = computed(() => {
return allTabStatus.value && tabStatus.value;
});
provide(ANCESTOR_TAB_STATUS_KEY, newAllTabStatus);
</script>
<template>
<Tab v-bind="props">
<slot />
</Tab>
</template>
const ancestorTabStatus = inject(ANCESTOR_TAB_STATUS_KEY, ref(true));
const tabStatus = inject(TAB_STATUS_KEY, ref(true));
const allTabStatus = computed(() => {
return ancestorTabStatus.value && tabStatus.value;
}); |
Beta Was this translation helpful? Give feedback.
0 replies
-
希望能在仓库代码中直接增加这个属性,重写组件还是比较繁琐,代码比较冗余 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
如图,当tab被激活时,将显示滚动到顶部的
FloatingBubble
。目前采用的方式是注入TAB_STATUS_KEY
这个属性,进行判断。现在的问题是,当父级的tab切换后,最底层的tab还是处于active的状态。
全部tab激活这个状态应该怎么去判定呢?tab激活进行某些操作是常见操作,是否还存在方法获取父级tabs是否全部激活的状态呢?
Beta Was this translation helpful? Give feedback.
All reactions