imatrix-ui 2.8.5-tmp1 → 2.8.5-tmp3

package/src/views/layout/tab-content-index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <menubar :system-code="systemCode" :collapse="true" class="sidebar-container"/>
+    <div class="main-container">
+      <breadcrumb v-if="showMenuRoute"/>
+      <tab-content/>
+      <!-- <app-main /> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menubar, Breadcrumb } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { isShowMenuRoute } from 'imatrix-ui/src/utils/common-util'
+import TabContent from './components/tabs/tab-content'
+import Vue from 'vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    Menubar,
+    Breadcrumb,
+    TabContent
+  },
+  mixins: [ResizeMixin],
+  data() {
+    // 是否显示菜单路径，默认是不显示
+    const showMenuRoute = isShowMenuRoute()
+    return {
+      showMenuRoute,
+      systemCode: null
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  created() {
+    this.systemCode = Vue.prototype.customSystem
+    console.log('新菜单组件-----systemCode====', this.systemCode)
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "imatrix-ui/src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+</style>