blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Tabs): using slot instead of render props (#10123)

Browse Source
This commit is contained in:
neverland 2021-12-30 14:31:14 +08:00 committed by GitHub
parent fa5e4e2591
commit 55303595af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/tabs/Tabs.tsx
View File

@ -361,6 +361,7 @@ export default defineComponent({
const renderNav = () => const renderNav = () =>
children.map((item, index) => ( children.map((item, index) => (
<TabsTitle <TabsTitle
v-slots={{ title: item.$slots.title }}
id={`${id}-${index}`} id={`${id}-${index}`}
ref={setTitleRefs(index)} ref={setTitleRefs(index)}
type={props.type} type={props.type}
@ -370,7 +371,6 @@ export default defineComponent({
isActive={index === state.currentIndex} isActive={index === state.currentIndex}
controls={item.id} controls={item.id}
scrollable={scrollable.value} scrollable={scrollable.value}
renderTitle={item.$slots.title}
activeColor={props.titleActiveColor} activeColor={props.titleActiveColor}
inactiveColor={props.titleInactiveColor} inactiveColor={props.titleInactiveColor}
onClick={(event: MouseEvent) => onClickTab(item, index, event)} onClick={(event: MouseEvent) => onClickTab(item, index, event)}

5
packages/vant/src/tabs/TabsTitle.tsx
View File

@ -19,12 +19,11 @@ export default defineComponent({
controls: String, controls: String,
scrollable: Boolean, scrollable: Boolean,
activeColor: String, activeColor: String,
renderTitle: Function,
inactiveColor: String, inactiveColor: String,
showZeroBadge: truthProp, showZeroBadge: truthProp,
}, },
setup(props) { setup(props, { slots }) {
const style = computed(() => { const style = computed(() => {
const style: CSSProperties = {}; const style: CSSProperties = {};
const { type, color, disabled, isActive, activeColor, inactiveColor } = const { type, color, disabled, isActive, activeColor, inactiveColor } =
@ -56,7 +55,7 @@ export default defineComponent({
const renderText = () => { const renderText = () => {
const Text = ( const Text = (
<span class={bem('text', { ellipsis: !props.scrollable })}> <span class={bem('text', { ellipsis: !props.scrollable })}>
{props.renderTitle ? props.renderTitle() : props.title} {slots.title ? slots.title() : props.title}
</span> </span>
); );