import { VantComponent } from '../common/component'; import { useChildren } from '../common/relation'; import { getRect } from '../common/utils'; VantComponent({ relation: useChildren('tabbar-item', function () { this.updateChildren(); }), props: { active: { type: null, observer: 'updateChildren', }, activeColor: { type: String, observer: 'updateChildren', }, inactiveColor: { type: String, observer: 'updateChildren', }, fixed: { type: Boolean, value: true, observer: 'setHeight', }, placeholder: { type: Boolean, observer: 'setHeight', }, border: { type: Boolean, value: true, }, zIndex: { type: Number, value: 1, }, safeAreaInsetBottom: { type: Boolean, value: true, }, }, data: { height: 50, }, methods: { updateChildren() { const { children } = this; if (!Array.isArray(children) || !children.length) { return; } children.forEach((child) => child.updateFromParent()); }, setHeight() { if (!this.data.fixed || !this.data.placeholder) { return; } wx.nextTick(() => { getRect(this, '.van-tabbar').then((res) => { this.setData({ height: res.height }); }); }); }, }, });