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

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

Browse Source 
* 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
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/vant/src/tab/Tab.tsx
View File

@ -6,6 +6,8 @@ import {
nextTick,
defineComponent,
getCurrentInstance,
normalizeClass,
normalizeStyle,
type PropType,
type CSSProperties,
type ExtractPropTypes,
@ -20,6 +22,7 @@ import {
numericProp,
createNamespace,
ComponentInstance,
isObject,
} from '../utils';
import { TABS_KEY } from '../tabs/Tabs';
@ -89,6 +92,25 @@ export default defineComponent({
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 = (
onClickTab: (
instance: ComponentInstance,
@ -101,8 +123,8 @@ export default defineComponent({
v-slots={{ title: slots.title }}
id={`${parent.id}-${index.value}`}
ref={parent.setTitleRefs(index.value)}
style={props.titleStyle}
class={props.titleClass}
style={parserStyle.value}
class={parserClass.value}
isActive={active.value}
controls={id}
scrollable={parent.scrollable.value}