hitch-sb-antd/src/layouts/SideMenuRouteView.vue

<template>
  <a-layout>
    <a-layout-sider
      v-if="menu&&menu.children!==null&&menu.children!==undefined"
      width="190px"
      v-model="collapsed"
      :theme="theme"
      :trigger="null">
      <s-menu
        :collapsed="collapsed"
        :menu="menu.children"
        :theme="theme"
        style="padding: 80px 0px;"></s-menu>
    </a-layout-sider>
    <a-layout class="mix-layout">
      <a-layout-content :style="{ minHeight: '100vh', margin: '15px 15px 0', paddingTop: '65px'}">
        <multi-tab v-if="multiTab"></multi-tab>
        <transition name="page-transition">
          <RouteView />
        </transition>
      </a-layout-content>
      <a-layout-footer>
        <global-footer />
      </a-layout-footer>
    </a-layout>
  </a-layout>

</template>

<script>
import RouteView from './RouteView'
import SMenu from '@/components/Menu'
import { mapState } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import GlobalFooter from '@/components/GlobalFooter'

export default {
  name: 'SideMenuRouteView',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    GlobalFooter,
    SMenu
  },
  props: {
    menus: {
      type: Object,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      activeMenu: state => state.permission.activeMenu
    }),
    menu () {
      return this.menus[this.activeMenu]
    }
  },
  mounted () {

  }
}
</script>

<style lang="less">
  @import url('../components/global.less');

  .ant-pro-multi-tab{
    margin-left: 0px !important;
  }
    .ant-tabs-bar{
    padding-left: 0px !important;
  }
  .mix-layout{
    height: 100vh;
    overflow-y: auto;
  }
</style>