修复: 解决 内容区设置 minHeight 后导致无法自适应子元素高度问题;

src/components/exception/ExceptionPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="exception-page" :style="{height: layoutMinHeight - 64 + 'px'}">
+  <div class="exception-page" :style="{height: layoutMinHeight - 32 + 'px'}">
     <div class="img">
       <img :src="config[type].img" />
     </div>

src/components/setting/Setting.vue

@@ -59,14 +59,22 @@
       <a-list :split="false">
         <a-list-item>
           动画效果
-          <a-select v-model="animate" @change="setAnimate" class="select-item" size="small" slot="actions">
+          <a-select
-            <a-select-option :key="index" :value="index" v-for="(item, index) in animates">{{item.alias}}</a-select-option>
+            v-model="animate"
+            @change="setAnimate"
+            class="select-item" size="small" slot="actions"
+          >
+            <a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{item.alias}}</a-select-option>
           </a-select>
         </a-list-item>
         <a-list-item>
           动画方向
-          <a-select v-model="direction" @change="setAnimate" class="select-item" size="small" slot="actions">
+          <a-select
-            <a-select-option :key="index" :value="index" v-for="(item, index) in animateCfg.directions">{{item}}</a-select-option>
+            v-model="direction"
+            @change="setAnimate"
+            class="select-item" size="small" slot="actions"
+          >
+            <a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{item}}</a-select-option>
           </a-select>
         </a-list-item>
       </a-list>
@@ -91,26 +99,23 @@ export default {
   components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem},
   data() {
     return {
-      animate: 0,
+      animate: this.$store.state.setting.animate.name,
-      direction: 0,
+      direction: this.$store.state.setting.animate.direction,
       colors: ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1d92ff', '#2f54eb', '#722ed1'],
     }
   },
   watch: {
-    animate(){
-      this.direction = 0
-    }
   },
   computed: {
-    animateCfg() {
+    directions() {
-      return this.animates[this.animate]
+      return this.animates.find(item => item.name == this.animate).directions
     },
     ...mapState('setting', ['animates', 'multiPage'])
   },
   methods: {
     onColorChange (values, colors) {
       if (colors.length > 0) {
-        let closeMessage = this.$message.loading(`您选择了主题色 ${colors}, 正在切换...`)
+        let closeMessage = this.$message.info(`您选择了主题色 ${colors}, 正在切换...`)
         themeUtil.changeThemeColor(colors[0]).then(closeMessage)
       }
     },
@@ -132,10 +137,10 @@ export default {
       this.$store.commit('setting/setMultiPage', checked)
     },
     setAnimate() {
-      let animation = this.animates[this.animate]
+      this.direction = this.directions[0]
-      let animate = {
+        let animate = {
-        name: animation.name,
+        name: this.animate,
-        direction: animation.directions[this.direction]
+        direction: this.direction
       }
       this.$store.commit('setting/setAnimate', animate)
     }

src/config/animates.js

@@ -1,14 +1,14 @@
 const direct_s = ['left', 'right']
-const direct_1 = ['down', 'up', 'left', 'right']
+const direct_1 = ['left', 'right', 'down', 'up']
 const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig']
 const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
 const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
 
 module.exports = [
-  {name: 'back', alias: '后位', directions: direct_1},
+  {name: 'back', alias: '渐近', directions: direct_1},
   {name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')},
   {name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')},
-  {name: 'flip', alias: '翻转', directions: ['x', 'y', 'default']},
+  {name: 'flip', alias: '翻转', directions: ['x', 'y']},
   {name: 'lightSpeed', alias: '光速', directions: direct_s},
   {name: 'rotate', alias: '旋转', directions: direct_3.concat('default')},
   {name: 'roll', alias: '翻滚', directions: ['default']},

src/config/index.js

@@ -7,5 +7,4 @@ module.exports = {
     {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
     {link: 'https://ant.design', name: 'Ant Design'}
   ],
-
 }

src/layouts/GlobalLayout.vue

@@ -12,8 +12,10 @@
     </drawer>
     <a-layout class="global-layout-main">
       <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
-      <a-layout-content class="global-layout-content" :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
+      <a-layout-content class="global-layout-content">
-        <slot></slot>
+        <div :style="`min-height: ${minHeight}px; position: relative`">
+          <slot></slot>
+        </div>
       </a-layout-content>
       <a-layout-footer style="padding: 0px">
         <global-footer :link-list="linkList" :copyright="copyright" />
@@ -29,7 +31,7 @@ import Drawer from '../components/tool/Drawer'
 import SiderMenu from '../components/menu/SiderMenu'
 import Setting from '../components/setting/Setting'
 
-const minHeight = window.innerHeight - 64 - 122
+const minHeight = window.innerHeight - 64 - 24 - 122
 
 let menuData = []
 
@@ -38,7 +40,7 @@ export default {
   components: {Setting, SiderMenu, Drawer, GlobalFooter, GlobalHeader},
   data () {
     return {
-      minHeight: minHeight + 'px',
+      minHeight: minHeight,
       collapsed: false,
       menuData: menuData,
       showSetting: false
@@ -90,8 +92,7 @@ export default {
   .global-layout{
     height: 100vh;
     .global-layout-main{
-      height: 100vh;
+      overflow: scroll;
-      overflow-y: auto;
       scrollbar-color: @primary-color @primary-2;
       scrollbar-width: thin;
       -ms-overflow-style:none;
@@ -110,6 +111,8 @@ export default {
       }
     }
     .global-layout-content{
+      padding: 24px 24px 0;
+      min-height: auto;
     }
     .setting{
       background-color: #1890ff;