refactor(Tabs): refactor with composition api

youzan · Sep 22, 2020 · 882e3ef · 882e3ef
1 parent 8ef4676
commit 882e3ef
Show file tree

Hide file tree

Showing 3 changed files with 330 additions and 371 deletions.
diff --git a/src/mixins/touch.js b/src/mixins/touch.js
diff --git a/src/tab/index.js b/src/tab/index.js
@@ -1,12 +1,14 @@
+import { ref, watch, nextTick } from 'vue';
 import { createNamespace } from '../utils';
-import { ChildrenMixin } from '../mixins/relation';
+import { TABS_KEY } from '../tabs';
+
+// Composition
 import { routeProps } from '../composition/use-route';
+import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('tab');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanTabs')],
-
   props: {
     ...routeProps,
     dot: Boolean,
@@ -17,63 +19,74 @@ export default createComponent({
     disabled: Boolean,
   },
 
-  data() {
-    return {
-      inited: false,
-    };
-  },
+  setup(props, { slots }) {
+    const root = ref();
+    const inited = ref(false);
+    const { parent, index } = useParent(TABS_KEY, {
+      getRoot: () => root.value,
+      props,
+      slots,
+    });
 
-  computed: {
-    computedName() {
-      return this.name ?? this.index;
-    },
+    if (!parent) {
+      throw new Error('[Vant] Tabs: <van-tab> must be used inside <van-tabs>');
+    }
+
+    const getName = () => props.name ?? index.value;
 
-    isActive() {
-      const active = this.computedName === this.parent.currentName;
+    const init = () => {
+      inited.value = true;
 
-      if (active) {
-        this.inited = true;
+      if (parent.props.lazyRender) {
+        nextTick(() => {
+          parent.emit('rendered', getName(), props.title);
+        });
       }
-      return active;
-    },
-  },
+    };
 
-  watch: {
-    title() {
-      this.parent.setLine();
-    },
+    const isActive = () => {
+      const active = getName() === parent.currentName.value;
 
-    inited(val) {
-      if (this.parent.lazyRender && val) {
-        this.$nextTick(() => {
-          this.parent.$emit('rendered', this.computedName, this.title);
-        });
+      if (active && !inited.value) {
+        init();
       }
-    },
-  },
 
-  render() {
-    const { parent, isActive } = this;
-    const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
-    const show = parent.scrollspy || isActive;
-    const Content = shouldRender ? this.$slots.default?.() : null;
+      return active;
+    };
+
+    watch(
+      () => props.title,
+      () => {
+        parent.setLine();
+      }
+    );
+
+    return () => {
+      const { animated, scrollspy, lazyRender } = parent.props;
+      const active = isActive();
+      const show = scrollspy || active;
+
+      const shouldRender = inited.value || scrollspy || !lazyRender;
+      const Content = shouldRender ? slots.default?.() : null;
+
+      if (animated) {
+        return (
+          <div
+            ref={root}
+            role="tabpanel"
+            aria-hidden={!active}
+            class={bem('pane-wrapper', { inactive: !active })}
+          >
+            <div class={bem('pane')}>{Content}</div>
+          </div>
+        );
+      }
 
-    if (parent.animated) {
       return (
-        <div
-          role="tabpanel"
-          aria-hidden={!isActive}
-          class={bem('pane-wrapper', { inactive: !isActive })}
-        >
-          <div class={bem('pane')}>{Content}</div>
+        <div v-show={show} ref={root} role="tabpanel" class={bem('pane')}>
+          {Content}
         </div>
       );
-    }
-
-    return (
-      <div vShow={show} role="tabpanel" class={bem('pane')}>
-        {Content}
-      </div>
-    );
+    };
   },
 });