iebug

src/App.vue

@@ -4,124 +4,127 @@
       <sidebar v-if="showSidebar"></sidebar>
       <div class="app-content-main flex1">
         <topbar v-if="showSidebar"></topbar>
-          <tabbar v-if="showSidebar" :clickIndex='nowindex' :dataList='editableTabs' @itemclick='itemclick' @remove="remove"></tabbar>
-          <keep-alive :include="include">
-            <router-view class="app-content-main-view flex1" />
-          </keep-alive>
+        <tabbar
+          v-if="showSidebar"
+          :clickIndex="nowindex"
+          :dataList="editableTabs"
+          @itemclick="itemclick"
+          @remove="remove"
+        ></tabbar>
+        <keep-alive :include="include">
+          <router-view class="app-content-main-view flex1" />
+        </keep-alive>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import {
-    menuRouter,
-    otherRouter
-  } from '@/router/routes.js'
-  import store from '@/store/index'
-  import sidebar from './components/sidebar/index.vue'
-  import topbar from './components/topbar.vue'
-  import tabbar from './components/tabbar.vue'
-  export default {
-    name: 'App',
-    components: {
-      sidebar,
-      topbar,tabbar
+import { menuRouter, otherRouter } from '@/router/routes.js';
+import store from '@/store/index';
+import sidebar from './components/sidebar/index.vue';
+import topbar from './components/topbar.vue';
+import tabbar from './components/tabbar.vue';
+export default {
+  name: 'App',
+  components: {
+    sidebar,
+    topbar,
+    tabbar,
+  },
+  data() {
+    return {
+      include: [],
+      menuDatas: [],
+      otherDatas: [],
+      allDatas: [],
+      editableTabs: [],
+      // nowindex:0
+    };
+  },
+  mounted() {},
+  computed: {
+    showSidebar() {
+      return this.$route.name != 'login';
     },
-    data() {
-      return {
-        include: [],
-        menuDatas: [],
-        otherDatas: [],
-        allDatas:[],
-        editableTabs: [],
-        // nowindex:0
-      }
-    },
-    mounted(){
+    nowindex() {
+      return store?.getters?.getTabIndex;
     },
-    computed: {
-      showSidebar() {
-        return this.$route.name != 'login';
-      },
-      nowindex(){
-        return store?.getters?.getTabIndex
+  },
+  created() {
+    menuRouter.forEach((item) => {
+      if (item.name) {
+        this.menuDatas.push(item);
+        this.allDatas.push(item);
       }
+    });
+    otherRouter.forEach((item) => {
+      if (item.name && item.name != 'login') {
+        this.otherDatas.push(item);
+        this.allDatas.push(item);
+      }
+    });
+    this.editableTabs = store?.getters?.getTabList;
+  },
+  watch: {
+    nowindex(val, newval) {
+      this.$router.push(this.editableTabs[val].path);
     },
-    created() {
-      menuRouter.forEach(item => {
-        if (item.name) {
-          this.menuDatas.push(item);
-          this.allDatas.push(item)
-        }
-      });
-      otherRouter.forEach(item => {
-        if (item.name && (item.name != 'login')) {
-          this.otherDatas.push(item);
-          this.allDatas.push(item)
-        }
-      });
-      this.editableTabs=store?.getters?.getTabList
-    },
-    watch: {
-      nowindex(val,newval){
-        this.$router.push(this.editableTabs[val].path)
-      },
-      $route(to, from) {
-        if (to.meta.keepAlive) {
-          !this.include.includes(to.name) && this.include.push(to.name);
-        }
-        // 标签页
-        if (to.name != 'login') {
-          this.menuDatas.forEach(element => {
-            if (element.name == to.name) {
-              let isclear=true
-              this.editableTabs.forEach(element2 => {
-                if(element2.name==to.meta.title){
-                  isclear=false //当前页面为菜单页面且不在当前tab中
-                }
-              })
-              if(isclear){
-                this.editableTabs = []
+    $route(to, from) {
+      if (to.meta.keepAlive) {
+        !this.include.includes(to.name) && this.include.push(to.name);
+      }
+      // 标签页
+      if (to.name != 'login') {
+        this.menuDatas.forEach((element) => {
+          if (element.name == to.name) {
+            let isclear = true;
+            this.editableTabs.forEach((element2) => {
+              if (element2.name == to.meta.title) {
+                isclear = false; //当前页面为菜单页面且不在当前tab中
               }
+            });
+            if (isclear) {
+              this.editableTabs = [];
             }
-          });
-          let isAdd=true
-          this.editableTabs.forEach((element2,index) => {
-              if(element2.name==to.meta.title){
-                  isAdd=false //当前页面在tab中
-                  // this.nowindex=index
-                  store.commit("SET_TABINDEX",index)
-              }
-          })
-          if(isAdd){
-            this.editableTabs.push({name:to.meta.title,path:to.path})
-            // this.nowindex=this.editableTabs.length-1
-            store.commit("SET_TABINDEX",this.editableTabs.length-1)
           }
-          store.commit("SET_TABLIST",this.editableTabs)
+        });
+        let isAdd = true;
+        this.editableTabs.forEach((element2, index) => {
+          if (element2.name == to.meta.title) {
+            isAdd = false; //当前页面在tab中
+            // this.nowindex=index
+            store.commit('SET_TABINDEX', index);
+          }
+        });
+        if (isAdd) {
+          this.editableTabs.push({ name: to.meta.title, path: to.path });
+          // this.nowindex=this.editableTabs.length-1
+          store.commit('SET_TABINDEX', this.editableTabs.length - 1);
         }
+        store.commit('SET_TABLIST', this.editableTabs);
       }
     },
-    methods: {
-      remove(item,index){
-        if(this.nowindex!=index){
-          if(this.nowindex>index){
-            store.commit("SET_TABINDEX",this.nowindex-1)
-          }
-        }else{
-          store.commit("SET_TABINDEX",index-1)
+  },
+  methods: {
+    remove(item, index) {
+      if (this.nowindex != index) {
+        if (this.nowindex > index) {
+          store.commit('SET_TABINDEX', this.nowindex - 1);
         }
-        this.editableTabs.splice(index,1)
-        store.commit("SET_TABLIST",this.editableTabs)
-      },
-      itemclick(item,index){
-        store.commit("SET_TABINDEX",index)
-      },
-    }
-  }
+      } else {
+        store.commit('SET_TABINDEX', index - 1);
+      }
+      this.editableTabs.splice(index, 1);
+      store.commit('SET_TABLIST', this.editableTabs);
+    },
+    itemclick(item, index) {
+      store.commit('SET_TABINDEX', index);
+    },
+  },
+};
 </script>
 
 <style lang="less">
-  @import "app.less";
-</style>
+@import 'app.less';
+</style>

src/app.less

@@ -35,7 +35,7 @@ html, body {
             background: white;
             margin: 10px;
             border-radius: 5px;
-            width: 98.5%;
+            width: calc(100vw - 100px);
           }
           .blackbtn{
             background: #040000;
@@ -105,7 +105,7 @@ html, body {
     transform: translate(-50%, -50%);
 }
 .flex1 {
-    flex: 1 0 0;
+    flex: 1;
   }
   
 .padding10{