neicanCMS/src/view/home/index.vue

<!-- vue 页面模板 -->
<template>
  <div class="layout">
    <Layout>
      <PageHeader title=" ">
        <template #action>
          <div class="login_out" @click="login_out">退出</div>
        </template>
        <template #content> </template>
      </PageHeader>
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu
            :active-name="active_name"
            theme="primary"
            width="auto"
            :open-names="['home']"
            @on-select="changePage"
            accordion
          >
            <div v-for="(item, i) in menu_list" :key="i">
              <Submenu v-if="item.children && item.children.length" :name="item.router">
                <template #title>
                  <Icon :type="item.icon || 'ios-browsers'" />
                  {{ item.name }}
                </template>
                <MenuItem
                  v-for="v in item.children"
                  :key="v.router"
                  :name="v.router"
                >
                  {{ v.name }}
                </MenuItem>
              </Submenu>
              <MenuItem v-else :name="item.router">
                <Icon :type="item.icon || 'ios-browsers'" />
                {{ item.name }}
              </MenuItem>
            </div>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '24px' }">
          <Content
            :style="{
              padding: '24px',
              height: content_height + 'px',
              overflow: 'auto',
              background: '#fff',
            }"
          >
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import api from '../../api/index.js';

export default {
  data() {
    return {
      content_height: 0,
      active_name: '',
      menu_list: [],
    };
  },
  mounted() {
    // 计算内容区域高度
    this.content_height = document.documentElement.clientHeight - 120;
    this.active_name = this.$route.path;
    api.menu_api().then(r => {
      this.menu_list = r || [];
    });
  },
  methods: {
    changePage(p) {
      this.$router.push(p);
    },
    login_out() {
      api.login_out_api().then(r => {
        console.log(r);
        localStorage.setItem('neican_token', '');
        this.$router.replace('/');
      });
    },
  },
};
</script>

<style lang="scss">
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .login_out {
    cursor: pointer;
  }
}
</style>