添加close

src/views/ModelMain.less

@@ -116,6 +116,17 @@
           line-height: 35px;
           padding:0 0 0 10px;
           font-size: 14px;
+          position: relative;
+          .close{
+            position: absolute;
+            right:0;
+            display: inline-flex;
+            padding:10px;
+            cursor:pointer;
+            &:hover{
+              color:var(--el-color-primary)
+            }
+          }
         }
       }
       .section-tabs.el-tabs--card{

src/views/ModelMain.vue

@@ -34,7 +34,9 @@
             <SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}"
                        :size="hideLeft ? 0 : sectionLeftSize">
               <div class="section-item-wrap">
-                <div class="title">{{ sectionLeftTitle }}</div>
+                <div class="title">
+                  {{ sectionLeftTitle }} <span class="close" @click="closeMe('hideLeft')"><component :is="renderIcon('element Close')"></component></span>
+                </div>
               </div>
             </SplitArea>
             <SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">
@@ -85,14 +87,18 @@
             </SplitArea>
             <SplitArea v-show="!hideRight" class="section-right" :size="hideRight ? 0 : sectionRightSize">
               <div class="section-item-wrap">
-                <div class="title">{{ sectionRightTitle }}</div>
+                <div class="title">
+                  {{ sectionRightTitle }}<span class="close" @click="closeMe('hideReft')"><component :is="renderIcon('element Close')"></component></span>
+                </div>
               </div>
             </SplitArea>
           </Split>
         </SplitArea>
         <SplitArea v-show="!hideBottom" :class="['section-bottom']" :size="hideBottom ? 0 : bottomSize" :min-size="0">
           <div class="section-item-wrap">
-            <div class="title">{{ sectionBottomTitle }}</div>
+            <div class="title">
+              {{ sectionBottomTitle }}<span class="close" @click="closeMe('hideBottom')"><component :is="renderIcon('element Close')"></component></span>
+            </div>
           </div>
         </SplitArea>
       </Split>
@@ -219,6 +225,18 @@ export default {
         this.hideBottom = false
         this.sectionBottomTitle = name
       }
+    },
+    closeMe(btn){
+      if(btn==='hideLeft'){
+        this.hideLeft = true
+        this.sectionLeftTitle = ''
+      }else if(btn==='hideRight'){
+        this.hideRight = true
+        this.sectionRightTitle = ''
+      }else if(btn==='hideBottom'){
+        this.hideBottom = true
+        this.sectionBottomTitle = ''
+      }
     }
   }
 }