fix: tabs many bug

hug-sun · Oct 6, 2020 · 5bbf84f · 5bbf84f
1 parent 8672162
commit 5bbf84f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 68 deletions.
diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md
@@ -123,7 +123,7 @@
 ```html
 <el-tabs type="border-card">
   <el-tab-pane>
-    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
+    <template v-slot:label><i class="el-icon-date"></i> 我的行程</template>
     我的行程
   </el-tab-pane>
   <el-tab-pane label="消息中心">消息中心</el-tab-pane>
@@ -178,6 +178,7 @@
           this.editableTabsValue = newTabName;
         }
         if (action === 'remove') {
+        console.log(targetName, action)
           let tabs = this.editableTabs;
           let activeName = this.editableTabsValue;
           if (activeName === targetName) {
@@ -276,7 +277,7 @@
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
+| modelValue / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | type     | 风格类型   | string   | card/border-card  |     —    |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | addable  | 标签是否可增加   | boolean   | — |  false  |

diff --git a/examples/play/index.vue b/examples/play/index.vue
@@ -1,54 +1,24 @@
 <template>
-  <div style="width: 500px">
-    <el-tabs v-model="activeName" tab-position="left" style="height: 500px">
-      <el-tab-pane name="1" lazy closable>
-        <template v-slot:label>
-          <span><i class="el-icon-date"></i> 我的行程</span>
-        </template>
-        我的行程
-      </el-tab-pane>
-      <el-tab-pane name="2" lazy label="消息中心">消息中心</el-tab-pane>
-      <el-tab-pane name="3" label="角色管理">角色管理</el-tab-pane>
-      <el-tab-pane name="4" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="5" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="6" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="7" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="8" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="9" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="10" label="定时任务补偿">定时任务补偿</el-tab-pane>
-      <el-tab-pane name="11" label="定时任务补偿1">定时任务补偿1</el-tab-pane>
-    </el-tabs>
-  </div>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">top</el-radio-button>
+    <el-radio-button label="right">right</el-radio-button>
+    <el-radio-button label="bottom">bottom</el-radio-button>
+    <el-radio-button label="left">left</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+  </el-tabs>
 </template>
 <script>
   export default {
     data() {
       return {
-        activeName: '1',
+        tabPosition: 'top'
       };
-    },
-    watch:{
-      activeName(v){
-        console.log('activeName :>> ', v);
-      }
-    },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
-      },
-      edit(name, action){
-        console.log(name)
-        console.log(action)
-      },
-      async beforeLeave(){
-        console.log(arguments)
-        throw "e"
-      }
-    },
-    mounted(){
-      setTimeout(() => {
-        this.activeName = '3'
-      }, 3000);
     }
   };
 </script>
diff --git a/packages/tab-pane/TabPane.vue b/packages/tab-pane/TabPane.vue
@@ -36,12 +36,13 @@ export default {
       rendered: false,
       pane: instance
     })
+
     if (!elTabs) {
       console.error('Element: not find ETabs')
       return
     }
     index.value = elTabs.ctx.tabList.length
-    elTabs.ctx.tabList.push(tab)
+    elTabs.ctx.tabList[index.value] = tab
     return {
       elTabs,
       tab,

diff --git a/packages/tabs/Tabs.vue b/packages/tabs/Tabs.vue
@@ -10,10 +10,7 @@
     ]"
     ref="tabs"
   >
-    <div v-if="tabPosition === 'bottom'" class="el-tabs__content">
-      <slot></slot>
-    </div>
-    <div class="el-tabs__header" :class="['is-' + tabPosition]">
+    <div ref="hander" class="el-tabs__header" :class="['is-' + tabPosition]">
       <span
         v-if="addable || editable"
         tabindex="0"
@@ -87,11 +84,13 @@
         </div>
       </div>
     </div>
-    <div v-if="tabPosition !== 'bottom'" class="el-tabs__content">
+
+    <div ref="content" class="el-tabs__content">
       <slot></slot>
     </div>
   </div>
 </template>
+
 <script>
 import {
   getCurrentInstance,
@@ -100,10 +99,10 @@ import {
   onUpdated,
   provide,
   reactive,
-  watchEffect,
   computed,
   ref,
-  watch
+  watch,
+  toRefs
 } from 'vue'
 
 export default {
@@ -138,7 +137,7 @@ export default {
       scrollToActive,
       handleClickLeft,
       handleClickRight
-    } = usScroll({
+    } = useTabScroll({
       tabElList
     })
 
@@ -148,7 +147,7 @@ export default {
       scrollToActive
     })
 
-    const { activeBarStyle } = useBarStyle({ tabList, state, direction })
+    const { activeBarStyle } = useTabBarStyle({ tabList, state, direction })
 
     return {
       activeBarStyle,
@@ -167,7 +166,7 @@ export default {
   }
 }
 
-function useBarStyle({ tabList, state, direction }) {
+function useTabBarStyle({ tabList, state, direction }) {
   const activeBarStyle = computed(() => {
     const { sizeName, textSizeName, posName, dirFlag } = direction.value
     return [
@@ -186,12 +185,10 @@ function useTabNav({ tabList, tabElList, scrollToActive }) {
   const instance = getCurrentInstance()
   const state = reactive({ activeName: '', activeIndex: -1 })
 
-  watchEffect(() => {
-    const tabIndex = tabList.findIndex(
-      (item) => item.name === instance.props.modelValue
-    )
+  watch(toRefs(instance.props).modelValue || ref(null), (v) => {
+    const tabIndex = tabList.findIndex((item) => item.name === v)
     if (tabIndex === -1) return
-    handleClick(tabList[tabIndex], tabIndex)
+    switchTab(tabList[tabIndex], tabIndex)
   })
 
   onMounted(async () => {
@@ -218,29 +215,38 @@ function useTabNav({ tabList, tabElList, scrollToActive }) {
     })
   })
 
-  const handleClick = async (item, index, e) => {
+  const switchTab = async (item, index) => {
     if (index === state.activeIndex) {
-      return
+      return false
     }
     if (item.disabled) {
-      return
+      return false
     }
     const isLeave = await instance.props.beforeLeave(
       item.name,
       state.activeName
     )
     if (!isLeave) {
-      return
+      return false
     }
     item.rendered = true
     state.activeName = item.name
     state.activeIndex = index
+    scrollToActive(item)
+    return true
+  }
+
+  const handleClick = async (item, index, e) => {
+    await switchTab(item, index)
     instance.emit('update:modelValue', state.activeName)
     instance.emit('tab-click', tabList[index], e)
-    scrollToActive(item)
   }
 
   const handleClose = (item, index, e) => {
+    tabList.splice(index, 1)
+    nextTick(() => {
+      tabElList.splice(index, 1)
+    })
     instance.emit('tab-remove', item.name, index, item, e)
     instance.emit('edit', item.name, 'remove')
   }
@@ -252,7 +258,7 @@ function useTabNav({ tabList, tabElList, scrollToActive }) {
   }
 }
 
-function usScroll({ tabElList }) {
+function useTabScroll({ tabElList }) {
   const instance = getCurrentInstance()
   const tabs = ref(null)
   const tabScroll = ref(null)
@@ -268,6 +274,15 @@ function usScroll({ tabElList }) {
     const offsetName = { X: 'offsetWidth', Y: 'offsetHeight' }[dirFlag]
     const scrollName = { X: 'scrollWidth', Y: 'scrollHeight' }[dirFlag]
     const posName = dirFlag.toLocaleLowerCase()
+
+    scrollSize.value = 0
+
+    dirFlag === 'X'
+      ? instance.refs.hander &&
+        instance.refs.hander.before(instance.refs.content)
+      : instance.refs.content &&
+        instance.refs.content.before(instance.refs.hander)
+
     return {
       dirFlag,
       sizeName,