chore(Tab): optimize implementation of title slot (#4974)

src/tab/index.js

@@ -41,20 +41,10 @@ export default createComponent({
     }
   },
 
-  mounted() {
-    if (this.slots('title')) {
-      this.parent.renderTitle(this.$refs.title, this.index);
-    }
-  },
-
   render(h) {
     const { slots, isActive } = this;
     const shouldRender = this.inited || !this.parent.lazyRender;
-    const Content = [shouldRender ? slots() : h()];
-
-    if (slots('title')) {
-      Content.push(<div ref="title">{slots('title')}</div>);
-    }
+    const Content = shouldRender ? slots() : h();
 
     if (this.parent.animated) {
       return (

src/tab/test/__snapshots__/demo.spec.js.snap

@@ -194,10 +194,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis"><div><i class="van-icon van-icon-more-o"><!----></i>标签 
-        </div></span></div>
-          <div role="tab" class="van-tab"><span class="van-ellipsis"><div><i class="van-icon van-icon-more-o"><!----></i>标签 
-        </div></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签 
+        </span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签 
+        </span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>

src/tabs/Title.js

@@ -1,8 +1,8 @@
 import { createNamespace } from '../utils';
 
-const bem = createNamespace('tab')[1];
+const [createComponent, bem] = createNamespace('tab');
 
-export default {
+export default createComponent({
   props: {
     type: String,
     color: String,
@@ -51,12 +51,6 @@ export default {
   methods: {
     onClick() {
       this.$emit('click');
-    },
-
-    renderTitle(el) {
-      const { title } = this.$refs;
-      title.innerHTML = '';
-      title.appendChild(el);
     }
   },
 
@@ -73,10 +67,10 @@ export default {
         style={this.style}
         onClick={this.onClick}
       >
-        <span ref="title" class={{ 'van-ellipsis': this.ellipsis }}>
-          {this.title}
+        <span class={{ 'van-ellipsis': this.ellipsis }}>
+          {this.slots() || this.title}
         </span>
       </div>
     );
   }
-};
+});

src/tabs/index.js

@@ -203,7 +203,11 @@ export default createComponent({
         this.$emit('input', this.currentName);
 
         if (shouldEmitChange) {
-          this.$emit('change', this.currentName, this.children[currentIndex].title);
+          this.$emit(
+            'change',
+            this.currentName,
+            this.children[currentIndex].title
+          );
         }
       }
     },
@@ -246,13 +250,6 @@ export default createComponent({
       scrollLeftTo(nav, to, immediate ? 0 : this.duration);
     },
 
-    // render title slot of child tab
-    renderTitle(el, index) {
-      this.$nextTick(() => {
-        this.$refs.titles[index].renderTitle(el);
-      });
-    },
-
     onScroll(params) {
       this.stickyFixed = params.isFixed;
       this.$emit('scroll', params);
@@ -276,6 +273,9 @@ export default createComponent({
         activeColor={this.titleActiveColor}
         inactiveColor={this.titleInactiveColor}
         swipeThreshold={this.swipeThreshold}
+        scopedSlots={{
+          default: () => item.slots('title')
+        }}
         onClick={() => {
           this.onClick(index);
           route(item.$router, item);
@@ -291,10 +291,17 @@ export default createComponent({
           { [BORDER_TOP_BOTTOM]: type === 'line' && this.border }
         ]}
       >
-        <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>
+        <div
+          ref="nav"
+          role="tablist"
+          class={bem('nav', [type])}
+          style={this.navStyle}
+        >
           {this.slots('nav-left')}
           {Nav}
-          {type === 'line' && <div class={bem('line')} style={this.lineStyle} />}
+          {type === 'line' && (
+            <div class={bem('line')} style={this.lineStyle} />
+          )}
           {this.slots('nav-right')}
         </div>
       </div>