From 999b589454abdf1700aa230bcd95816ed6be0ba2 Mon Sep 17 00:00:00 2001
From: Wangjiahao <1522128093@qq.com>
Date: Tue, 4 Apr 2023 18:12:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E5=8D=A1=E7=BB=84=E4=BB=B6tab=E9=A1=B5=E8=BF=87?=
 =?UTF-8?q?=E5=A4=9A=E6=97=B6=EF=BC=8C=E8=BD=AE=E6=92=AD=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E8=A2=AB=E9=81=AE=E6=8C=A1=EF=BC=8C=E7=9C=8B=E4=B8=8D=E8=A7=81?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=87=E9=A2=98=E4=BA=86=20#4956?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/widget/deWidget/DeTabs.vue | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/widget/deWidget/DeTabs.vue b/frontend/src/components/widget/deWidget/DeTabs.vue
index 786622fa4e..1dc9b1b474 100644
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/frontend/src/components/widget/deWidget/DeTabs.vue
@@ -278,6 +278,7 @@ export default {
   },
   data() {
     return {
+      tabsAreaScroll: false,
       timer: null,
       scrollLeft: 50,
       scrollTop: 10,
@@ -312,7 +313,11 @@ export default {
       return Boolean(this.$store.state.dragComponentInfo)
     },
     headClass() {
-      return 'tab-head-' + this.element.style.headPosition
+      if(this.tabsAreaScroll){
+        return 'tab-head-left'
+      }else{
+        return 'tab-head-' + this.element.style.headPosition
+      }
     },
     curCanvasScaleSelf() {
       return this.curCanvasScaleMap[this.canvasId]
@@ -405,6 +410,11 @@ export default {
         this.initCarousel()
       }
     },
+    'element': {
+      handler(newVal, oldVla) {
+        this.calcTabLength()
+      }
+    },
     activeTabName: {
       handler(newVal, oldVla) {
         this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
@@ -452,17 +462,30 @@ export default {
   },
   created() {
     bus.$on('add-new-tab', this.addNewTab)
-    this.activeTabName = this.element.options.tabList[0].name
+    this.$nextTick(() => {
+      this.activeTabName = this.element.options.tabList[0].name
+    });
     this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
     this.setContentThemeStyle()
   },
   mounted() {
     this.initCarousel()
+    this.calcTabLength()
   },
   beforeDestroy() {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    calcTabLength(){
+      this.$nextTick(()=>{
+        if(this.element.options.tabList.length>0){
+          const containerDom = document.getElementById("tab-"+this.element.options.tabList[this.element.options.tabList.length -1].name)
+          this.tabsAreaScroll = containerDom.parentNode.scrollWidth > containerDom.parentNode.parentNode.scrollWidth
+        }else{
+          this.tabsAreaScroll = false
+        }
+      })
+    },
     getType() {
       return this.element.type
     },
@@ -501,11 +524,13 @@ export default {
         _this.timer = setInterval(() => {
           const nowIndex = switchCount % _this.element.options.tabList.length
           switchCount++
-          _this.activeTabName = _this.element.options.tabList[nowIndex].name
-          const targetRef = _this.$refs['canvasTabRef-' + _this.activeTabName]
-          if (targetRef) {
-            targetRef[0].restore()
-          }
+          _this.$nextTick(() => {
+            _this.activeTabName = _this.element.options.tabList[nowIndex].name
+            const targetRef = _this.$refs['canvasTabRef-' + _this.activeTabName]
+            if (targetRef) {
+              targetRef[0].restore()
+            }
+          });
         }, switchTime)
       }
     },