fix(Tab): Maximum recursive updates exceeded in Tabs (#11898)

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>
This commit is contained in:
Zhousg 2023-05-27 10:39:39 +08:00 committed by GitHub
parent 1dcfd2dac0
commit 53a108ec7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -6,6 +6,8 @@ import {
nextTick, nextTick,
defineComponent, defineComponent,
getCurrentInstance, getCurrentInstance,
normalizeClass,
normalizeStyle,
type PropType, type PropType,
type CSSProperties, type CSSProperties,
type ExtractPropTypes, type ExtractPropTypes,
@ -20,6 +22,7 @@ import {
numericProp, numericProp,
createNamespace, createNamespace,
ComponentInstance, ComponentInstance,
isObject,
} from '../utils'; } from '../utils';
import { TABS_KEY } from '../tabs/Tabs'; import { TABS_KEY } from '../tabs/Tabs';
@ -89,6 +92,25 @@ export default defineComponent({
return isActive; return isActive;
}); });
// see: https://github.com/vant-ui/vant/issues/11763
const parserClass = ref('');
const parserStyle = ref('');
watch(
[() => props.titleClass, () => props.titleStyle],
([newClass, newStyle]) => {
parserClass.value = normalizeClass(newClass);
const style = normalizeStyle(newStyle);
if (isObject(style)) {
parserStyle.value = Object.entries(style)
.map(([key, val]) => `${key}:${val}; `)
.join('');
} else {
parserStyle.value = style ?? '';
}
},
{ immediate: true }
);
const renderTitle = ( const renderTitle = (
onClickTab: ( onClickTab: (
instance: ComponentInstance, instance: ComponentInstance,
@ -101,8 +123,8 @@ export default defineComponent({
v-slots={{ title: slots.title }} v-slots={{ title: slots.title }}
id={`${parent.id}-${index.value}`} id={`${parent.id}-${index.value}`}
ref={parent.setTitleRefs(index.value)} ref={parent.setTitleRefs(index.value)}
style={props.titleStyle} style={parserStyle.value}
class={props.titleClass} class={parserClass.value}
isActive={active.value} isActive={active.value}
controls={id} controls={id}
scrollable={parent.scrollable.value} scrollable={parent.scrollable.value}