refactor(Tabbar): refactor with composition api

src/calendar/components/Month.js

@@ -48,6 +48,7 @@ export default createComponent({
     const [visible, setVisible] = useToggle();
     const daysRef = ref();
     const monthRef = ref();
+    const height = useHeight(monthRef);
 
     const title = computed(() => formatMonthTitle(props.date));
 
@@ -82,14 +83,6 @@ export default createComponent({
       }
     });
 
-    let height;
-    const getHeight = () => {
-      if (!height) {
-        height = useHeight(monthRef);
-      }
-      return height;
-    };
-
     const getDate = () => props.data;
 
     const getTitle = () => title.value;
@@ -255,9 +248,9 @@ export default createComponent({
 
     // @exposed-api
     const vm = getCurrentInstance().proxy;
+    vm.height = height;
     vm.getDate = getDate;
     vm.getTitle = getTitle;
-    vm.getHeight = getHeight;
     vm.setVisible = setVisible;
     vm.scrollIntoView = scrollIntoView;
 

src/calendar/index.js

@@ -251,7 +251,9 @@ export default createComponent({
       const { body } = this.$refs;
       const { months, monthRefs } = this;
       const top = getScrollTop(body);
-      const heights = months.map((item, index) => monthRefs[index].getHeight());
+      const heights = months.map(
+        (item, index) => monthRefs[index].height.value
+      );
       const heightSum = heights.reduce((a, b) => a + b, 0);
 
       // iOS scroll bounce may exceed the range

src/composition/use-rect.ts

@@ -1,7 +1,13 @@
-import type { Ref } from 'vue';
+import { Ref, ref, onMounted } from 'vue';
 
 export const useRect = (el: Ref<Element>) => el.value.getBoundingClientRect();
 
-export const useWidth = (el: Ref<Element>) => useRect(el).width;
+export const useHeight = (el: Ref<Element>) => {
+  const height = ref();
 
-export const useHeight = (el: Ref<Element>) => useRect(el).height;
+  onMounted(() => {
+    height.value = useRect(el).height;
+  });
+
+  return height;
+};

src/nav-bar/index.js

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -30,14 +30,8 @@ export default createComponent({
   emits: ['click-left', 'click-right'],
 
   setup(props, { emit, slots }) {
-    const height = ref();
     const navBarRef = ref();
-
-    onMounted(() => {
-      if (props.placeholder && props.fixed) {
-        height.value = useHeight(navBarRef);
-      }
-    });
+    const height = useHeight(navBarRef);
 
     const onClickLeft = (event) => {
       emit('click-left', event);
@@ -90,7 +84,7 @@ export default createComponent({
     };
 
     return () => {
-      if (props.placeholder && props.fixed) {
+      if (props.fixed && props.placeholder) {
         return (
           <div
             class={bem('placeholder')}
@@ -100,7 +94,6 @@ export default createComponent({
           </div>
         );
       }
-
       return renderNavBar();
     };
   },

src/notice-bar/index.js

@@ -1,7 +1,7 @@
 import { ref, reactive, nextTick, onActivated, watch } from 'vue';
 import { createNamespace, isDef } from '../utils';
 import { doubleRaf } from '../utils/dom/raf';
-import { useWidth } from '../composition/use-rect';
+import { useRect } from '../composition/use-rect';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('notice-bar');
@@ -139,8 +139,8 @@ export default createComponent({
           return;
         }
 
-        const wrapRefWidth = useWidth(wrapRef);
-        const contentRefWidth = useWidth(contentRef);
+        const wrapRefWidth = useRect(wrapRef).width;
+        const contentRefWidth = useRect(contentRef).width;
 
         if (scrollable || contentRefWidth > wrapRefWidth) {
           doubleRaf(() => {

src/tabbar-item/index.js

@@ -1,9 +1,12 @@
+import { computed, getCurrentInstance } from 'vue';
+import { TABBAR_KEY } from '../tabbar';
+
 // Utils
 import { createNamespace, isObject, isDef } from '../utils';
-import { route, routeProps } from '../composition/use-route';
 
-// Mixins
-import { ChildrenMixin } from '../mixins/relation';
+// Composition
+import { useParent } from '../composition/use-relation';
+import { routeProps, useRoute } from '../composition/use-route';
 
 // Components
 import Icon from '../icon';
@@ -12,8 +15,6 @@ import Badge from '../badge';
 const [createComponent, bem] = createNamespace('tabbar-item');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanTabbar')],
-
   props: {
     ...routeProps,
     dot: Boolean,
@@ -25,57 +26,62 @@ export default createComponent({
 
   emits: ['click'],
 
-  data() {
-    return {
-      active: false,
-    };
-  },
+  setup(props, { emit, slots }) {
+    const route = useRoute();
+    const vm = getCurrentInstance().proxy;
+    const { parent, index } = useParent(TABBAR_KEY);
 
-  computed: {
-    routeActive() {
-      const { to, $route } = this;
-      if (to && $route) {
+    const active = computed(() => {
+      const { $route } = vm;
+      const { route, modelValue } = parent.props;
+
+      if (route && $route) {
+        const { to } = props;
         const config = isObject(to) ? to : { path: to };
         const pathMatched = config.path === $route.path;
         const nameMatched = isDef(config.name) && config.name === $route.name;
 
         return pathMatched || nameMatched;
       }
-    },
-  },
 
-  methods: {
-    onClick(event) {
-      this.parent.onChange(this.name || this.index);
-      this.$emit('click', event);
-      route(this.$router, this);
-    },
+      return (props.name || index.value) === modelValue;
+    });
 
-    genIcon(active) {
-      if (this.$slots.icon) {
-        return this.$slots.icon({ active });
+    const onClick = (event) => {
+      parent.setActive(props.name || index.value);
+      emit('click', event);
+      route();
+    };
+
+    const renderIcon = () => {
+      if (slots.icon) {
+        return slots.icon({ active: active.value });
       }
-
-      if (this.icon) {
-        return <Icon name={this.icon} classPrefix={this.iconPrefix} />;
+      if (props.icon) {
+        return <Icon name={props.icon} classPrefix={props.iconPrefix} />;
       }
-    },
-  },
+    };
 
-  render() {
-    const active = this.parent.route ? this.routeActive : this.active;
-    const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
+    return () => {
+      const { dot, badge } = props;
+      const { activeColor, inactiveColor } = parent.props;
+      const color = active.value ? activeColor : inactiveColor;
 
-    return (
-      <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
-        <div class={bem('icon')}>
-          {this.genIcon(active)}
-          <Badge dot={this.dot} badge={this.badge} />
+      return (
+        <div
+          class={bem({ active: active.value })}
+          style={{ color }}
+          onClick={onClick}
+        >
+          <div class={bem('icon')}>
+            {renderIcon()}
+            <Badge dot={dot} badge={badge} />
+          </div>
+          <div class={bem('text')}>
+            {slots.default?.({ active: active.value })}
+          </div>
         </div>
-        <div class={bem('text')}>
-          {this.$slots.default ? this.$slots.default({ active }) : null}
-        </div>
-      </div>
-    );
+      );
+    };
   },
 });

src/tabbar/index.js

@@ -1,12 +1,13 @@
-import { createNamespace } from '../utils';
-import { ParentMixin } from '../mixins/relation';
+import { ref, reactive, provide } from 'vue';
+import { createNamespace, isDef } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
+import { useHeight } from '../composition/use-rect';
 
 const [createComponent, bem] = createNamespace('tabbar');
 
-export default createComponent({
-  mixins: [ParentMixin('vanTabbar')],
+export const TABBAR_KEY = 'vanTabbar';
 
+export default createComponent({
   props: {
     route: Boolean,
     zIndex: [Number, String],
@@ -33,75 +34,59 @@ export default createComponent({
 
   emits: ['change', 'update:modelValue'],
 
-  data() {
-    return {
-      height: null,
-    };
-  },
+  setup(props, { emit, slots }) {
+    const tabbarRef = ref();
+    const height = useHeight(tabbarRef);
+    const children = reactive([]);
 
-  computed: {
-    fit() {
-      if (this.safeAreaInsetBottom !== null) {
-        return this.safeAreaInsetBottom;
+    const isUnfit = () => {
+      if (isDef(props.safeAreaInsetBottom)) {
+        return !props.safeAreaInsetBottom;
       }
       // enable safe-area-inset-bottom by default when fixed
-      return this.fixed;
-    },
-  },
+      return !props.fixed;
+    };
 
-  watch: {
-    children: 'setActiveItem',
-    modelValue: 'setActiveItem',
-  },
-
-  mounted() {
-    if (this.placeholder && this.fixed) {
-      this.height = this.$refs.tabbar.getBoundingClientRect().height;
-    }
-  },
-
-  methods: {
-    setActiveItem() {
-      this.children.forEach((item, index) => {
-        item.active = (item.name || index) === this.modelValue;
-      });
-    },
-
-    onChange(active) {
-      if (active !== this.modelValue) {
-        this.$emit('update:modelValue', active);
-        this.$emit('change', active);
-      }
-    },
-
-    genTabbar() {
+    const renderTabbar = () => {
+      const { fixed, zIndex, border } = props;
+      const unfit = isUnfit();
       return (
         <div
-          ref="tabbar"
-          style={{ zIndex: this.zIndex }}
-          class={[
-            { [BORDER_TOP_BOTTOM]: this.border },
-            bem({
-              unfit: !this.fit,
-              fixed: this.fixed,
-            }),
-          ]}
+          ref={tabbarRef}
+          style={{ zIndex }}
+          class={[bem({ unfit, fixed }), { [BORDER_TOP_BOTTOM]: border }]}
         >
-          {this.$slots.default?.()}
+          {slots.default?.()}
         </div>
       );
-    },
-  },
+    };
 
-  render() {
-    if (this.placeholder && this.fixed) {
-      return (
-        <div class={bem('placeholder')} style={{ height: `${this.height}px` }}>
-          {this.genTabbar()}
-        </div>
-      );
-    }
+    const setActive = (active) => {
+      if (active !== props.modelValue) {
+        emit('update:modelValue', active);
+        emit('change', active);
+      }
+    };
 
-    return this.genTabbar();
+    provide(TABBAR_KEY, {
+      props,
+      children,
+      setActive,
+    });
+
+    return () => {
+      if (props.fixed && props.placeholder) {
+        return (
+          <div
+            class={bem('placeholder')}
+            style={{ height: height.value ? `${height.value}px` : null }}
+          >
+            {renderTabbar()}
+          </div>
+        );
+      }
+
+      return renderTabbar();
+    };
   },
 });