feat: add state of min page height in setting module; :star2: 新增：vuex setti...

chenghongxing

2020-07-25 768dacdef7a3291bc23e5cc50125ccc3bdd8dd3d

feat: add state of min page height in setting module; :star2:
新增：vuex setting 模块增加页面最小高度 state；

 src/layouts/AdminLayout.vue

@@ -31,7 +31,7 @@
import Drawer from '../components/tool/Drawer'
import SideMenu from '../components/menu/SideMenu'
import Setting from '../components/setting/Setting'
import {mapState} from 'vuex'
import {mapState, mapMutations} from 'vuex'

const minHeight = window.innerHeight - 64 - 24 - 122

@@ -48,13 +48,8 @@
      showSetting: false
    }
  },
  provide() {
    return{
      layoutMinHeight: minHeight
    }
  },
  computed: {
    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar', 'hideSetting']),
    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar', 'hideSetting', 'pageMinHeight']),
    sideMenuWidth() {
      return this.collapsed ? '80px' : '256px'
    },
@@ -66,6 +61,7 @@
    }
  },
  methods: {
    ...mapMutations('setting', ['correctPageMinHeight']),
    toggleCollapse () {
      this.collapsed = !this.collapsed
    },
@@ -73,6 +69,12 @@
      this.toggleCollapse()
    },
  },
  created() {
    this.correctPageMinHeight(minHeight - 1)
  },
  beforeDestroy() {
    this.correctPageMinHeight(-minHeight + 1)
  },
  beforeCreate () {
    menuData = this.$router.options.routes.find((item) => item.path === '/').children
  }

 src/layouts/PageLayout.vue

@@ -1,6 +1,6 @@
<template>
  <div class="page-layout">
    <page-header :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
    <page-header ref="pageHeader" :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
      <slot name="action"  slot="action"></slot>
      <slot slot="content" name="headerContent"></slot>
      <div slot="content" v-if="!this.$slots.headerContent && desc">
@@ -21,14 +21,15 @@

<script>
import PageHeader from '@/components/page/header/PageHeader'
import {mapState} from 'vuex'
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'PageLayout',
  components: {PageHeader},
  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
  data () {
    return {
      page: {}
      page: {},
      pageHeaderHeight: 0,
    }
  },
  watch: {
@@ -36,11 +37,28 @@
      this.page = this.$route.meta.page
    }
  },
  updated() {
    if (!this._inactive) {
      this.updatePageHeight()
    }
  },
  activated() {
    this.updatePageHeight()
  },
  deactivated() {
    this.updatePageHeight(0)
  },
  mounted() {
    this.updatePageHeight()
  },
  created() {
    this.page = this.$route.meta.page
  },
  beforeDestroy() {
    this.updatePageHeight(0)
  },
  computed: {
    ...mapState('setting', ['layout', 'multiPage']),
    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight']),
    pageTitle() {
      let pageTitle = this.page && this.page.title
      return this.title || this.$t(pageTitle) || this.routeName
@@ -60,9 +78,13 @@
      } else {
        return this.getRouteBreadcrumb()
      }
    },
    marginCorrect() {
      return this.multiPage ? 24 : 0
    }
  },
  methods: {
    ...mapMutations('setting', ['correctPageMinHeight']),
    getRouteBreadcrumb() {
      let routes = this.$route.matched
      let breadcrumb = []
@@ -72,6 +94,14 @@
        breadcrumb.push(this.$t(key.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'))
      })
      return breadcrumb
    },
    /**
     * 用于计算页面内容最小高度
     * @param newHeight
     */
    updatePageHeight(newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
      this.pageHeaderHeight = newHeight
    }
  }
}

 src/layouts/header/AdminHeader.vue

@@ -13,7 +13,7 @@
      <div :class="['admin-header-right', headerTheme]">
          <header-search class="header-item" />
          <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
            <a>
            <a href="https://iczer.github.io/vue-antd-admin/" target="_blank">
              <a-icon type="question-circle-o" />
            </a>
          </a-tooltip>

 src/layouts/tabs/TabsView.vue

@@ -51,12 +51,21 @@
        { key: '2', icon: 'vertical-left', text: this.$t('closeRight') },
        { key: '3', icon: 'close', text: this.$t('closeOthers') }
      ]
    },
    tabsOffset() {
      return this.multiPage ? 24 : 0
    }
  },
  created () {
    const route = this.$route
    this.pageList.push(route)
    this.activePage = route.fullPath
  },
  mounted () {
    this.correctPageMinHeight(-this.tabsOffset)
  },
  beforeDestroy() {
    this.correctPageMinHeight(this.tabsOffset)
  },
  watch: {
    '$route': function (newRoute) {
@@ -72,6 +81,9 @@
      if (!newVal) {
        this.pageList = [this.$route]
      }
    },
    tabsOffset(newVal, oldVal) {
      this.correctPageMinHeight(oldVal - newVal)
    }
  },
  methods: {
@@ -167,7 +179,7 @@
    pageName(path) {
      return this.$t(path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
    },
    ...mapMutations('setting', ['setDustbins'])
    ...mapMutations('setting', ['setDustbins', 'correctPageMinHeight'])
  }
}
/**

 src/pages/exception/403.vue

@@ -1,5 +1,5 @@
<template>
  <exception-page :style="`min-height: ${minHeight}px`" type="403" />
  <exception-page :style="`min-height: ${pageMinHeight}px`" type="403" />
</template>

<script>
@@ -8,12 +8,8 @@
export default {
  name: 'Exp403',
  components: {ExceptionPage},
  inject: ['layoutMinHeight'],
  computed: {
    ...mapState('setting', ['multiPage']),
    minHeight() {
      return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
    }
    ...mapState('setting', ['pageMinHeight'])
  }
}
</script>

 src/pages/exception/404.vue

@@ -1,5 +1,5 @@
<template>
  <exception-page :style="`min-height: ${minHeight}px`" type="404" />
  <exception-page :style="`min-height: ${minHeight}`" type="404" />
</template>

<script>
@@ -8,12 +8,10 @@
export default {
  name: 'Exp404',
  components: {ExceptionPage},
  inject: ['layoutMinHeight'],
  computed: {
    ...mapState('setting', ['multiPage']),
    ...mapState('setting', ['pageMinHeight']),
    minHeight() {
      let layoutMinHeight = this.layoutMinHeight || window.innerHeight
      return this.multiPage ? layoutMinHeight - 32 : layoutMinHeight
      return this.pageMinHeight ? this.pageMinHeight + 'px' : '100vh'
    }
  }
}

 src/pages/exception/500.vue

@@ -1,5 +1,5 @@
<template>
  <exception-page :style="`min-height: ${minHeight}px`" type="500" />
  <exception-page :style="`min-height: ${pageMinHeight}px`" type="500" />
</template>

<script>
@@ -8,12 +8,8 @@
export default {
  name: 'Exp500',
  components: {ExceptionPage},
  inject: ['layoutMinHeight'],
  computed: {
    ...mapState('setting', ['multiPage']),
    minHeight() {
      return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
    }
    ...mapState('setting', ['pageMinHeight'])
  }
}
</script>

 src/router/config.js

@@ -11,6 +11,11 @@
      component: Login
    },
    {
      path: '*',
      name: '404',
      component: () => import('@/pages/exception/404'),
    },
    {
      path: '/',
      name: '首页',
      component: TabsView,
@@ -158,17 +163,17 @@
          children: [
            {
              path: '404',
              name: '404',
              name: 'Exp404',
              component: () => import('@/pages/exception/404')
            },
            {
              path: '403',
              name: '403',
              name: 'Exp403',
              component: () => import('@/pages/exception/403')
            },
            {
              path: '500',
              name: '500',
              name: 'Exp500',
              component: () => import('@/pages/exception/500')
            }
          ]

 src/router/index.js

@@ -1,6 +1,6 @@
import Vue from 'vue'
import {checkAuthorization} from '@/utils/request'
import Router from 'vue-router'
import {checkAuthorization} from '@/utils/request'
import {options, loginIgnore} from './config'

Vue.use(Router)

 src/store/modules/setting.js

@@ -7,6 +7,7 @@
    animates: ADMIN.animates,
    palettes: ADMIN.palettes,
    dustbins: [],
    pageMinHeight: 0,
    ...config,
  },
  mutations: {
@@ -42,6 +43,9 @@
    },
    setDustbins(state, dustbins) {
      state.dustbins = dustbins
    },
    correctPageMinHeight(state, minHeight) {
      state.pageMinHeight += minHeight
    }
  }
}