修改: 调整布局，解决全局动画导致的界面抖动问题；

iczer

2020-06-18 a90fa8d106a70744f59003d88143b501b2eb7f9d

修改: 调整布局，解决全局动画导致的界面抖动问题；

 src/App.vue

@@ -18,5 +18,7 @@
}
</script>

<style lang="less">
<style lang="less" scoped>
  #id{
  }
</style>

 src/components/exception/ExceptionPage.vue

@@ -1,8 +1,7 @@
<template>
  <div class="exception">
  <div class="exception-page" :style="{minHeight: layoutMinHeight - 64 + 'px'}">
    <div class="img">
      <img :src="config[type].img" />
      <!--<div class="ele" :style="{backgroundImage: `url(${config[type].img})`}"/>-->
    </div>
    <div class="content">
      <h1>{{config[type].title}}</h1>
@@ -24,17 +23,18 @@
    return {
      config: Config
    }
  }
  },
  inject: ['layoutMinHeight']
}
</script>

<style lang="less" scoped>
  .exception{
    min-height: 500px;
    height: 80%;
  .exception-page{
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 150px;
    background-color: white;
    .img{
      display: inline-block;
      padding-right: 52px;
@@ -46,7 +46,6 @@
    }
    .content{
      display: inline-block;
      flex: auto;
      h1{
        color: #434e59;
        font-size: 72px;

 src/components/setting/Setting.vue

@@ -7,7 +7,7 @@
      </img-checkbox-group>
    </setting-item>
    <setting-item title="主题色">
      <color-checkbox-group @change="onColorChange" :defaultValues="[0]" :multiple="false">
      <color-checkbox-group @change="onColorChange" :defaultValues="[5]" :multiple="false">
        <color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
      </color-checkbox-group>
    </setting-item>
@@ -96,6 +96,11 @@
      colors: ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1d92ff', '#2f54eb', '#722ed1'],
    }
  },
  watch: {
    animate(){
      this.direction = 0
    }
  },
  computed: {
    animateCfg() {
      return this.animates[this.animate]

 src/components/transition/PageToggleTransition.vue

@@ -51,9 +51,8 @@
          direction = animate.directions[0]
        } else {
          direction = animate.directions.find(item => item == this.direction)
          direction = (direction == undefined || direction === 'default') ? '' : direction
        }
        window.console.log(direction)
        direction = (direction == undefined || direction === 'default') ? '' : direction
        if (direction != '') {
          direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
          direction = direction[0].toUpperCase() + direction.substring(1)

 src/layouts/GlobalLayout.vue

@@ -1,5 +1,5 @@
<template>
  <a-layout>
  <a-layout class="global-layout">
    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
      <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
    </drawer>
@@ -10,9 +10,9 @@
      </div>
      <setting />
    </drawer>
    <a-layout>
    <a-layout class="global-layout-main">
      <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
      <a-layout-content :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
      <a-layout-content class="global-layout-content" :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
        <slot></slot>
      </a-layout-content>
      <a-layout-footer style="padding: 0px">
@@ -29,7 +29,7 @@
import SiderMenu from '../components/menu/SiderMenu'
import Setting from '../components/setting/Setting'

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

let menuData = []

@@ -42,6 +42,11 @@
      collapsed: false,
      menuData: menuData,
      showSetting: false
    }
  },
  provide() {
    return{
      layoutMinHeight: minHeight,
    }
  },
  computed: {
@@ -82,14 +87,38 @@
</script>

<style lang="less" scoped>
  .setting{
    background-color: #1890ff;
    color: #fff;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  .global-layout{
    height: 100vh;
    .global-layout-main{
      height: 100vh;
      overflow-y: scroll;
      scrollbar-color: @primary-color @primary-2;
      scrollbar-width: thin;
      &::-webkit-scrollbar{
        width: 3px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: @primary;
      }
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
        border-radius: 3px;
        background: @primary-3;
      }
    }
    .global-layout-content{
    }
    .setting{
      background-color: #1890ff;
      color: #fff;
      border-radius: 5px 0 0 5px;
      line-height: 40px;
      font-size: 22px;
      width: 40px;
      height: 40px;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }
  }
</style>

 src/layouts/MenuView.vue

@@ -1,25 +1,25 @@
<template>
  <global-layout>
    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
    <a-tabs
      @contextmenu.native="e => onContextmenu(e)"
      v-if="multiPage"
      :active-key="activePage"
      style="margin-top: -8px; margin-bottom: 8px"
      :hide-add="true"
      type="editable-card"
      @change="changePage"
      @edit="editPage">
      <a-tab-pane :key="page.fullPath" v-for="page in pageList">
        <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
      </a-tab-pane>
    </a-tabs>
    <page-toggle-transition :animate="animate.name" :direction="animate.direction">
      <keep-alive v-if="multiPage">
        <router-view />
      </keep-alive>
      <router-view v-else />
    </page-toggle-transition>
      <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
      <a-tabs
        @contextmenu.native="e => onContextmenu(e)"
        v-if="multiPage"
        :active-key="activePage"
        style="margin-top: -8px; margin-bottom: 8px"
        :hide-add="true"
        type="editable-card"
        @change="changePage"
        @edit="editPage">
        <a-tab-pane :key="page.fullPath" v-for="page in pageList">
          <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
        </a-tab-pane>
      </a-tabs>
      <page-toggle-transition :animate="animate.name" :direction="animate.direction">
        <keep-alive v-if="multiPage">
          <router-view />
        </keep-alive>
        <router-view v-else />
      </page-toggle-transition>
  </global-layout>
</template>

@@ -159,6 +159,9 @@
}
</script>

<style scoped>

<style scoped lang="less">
  .menu-view{
    .menu-view-content{
    }
  }
</style>

 src/layouts/PageLayout.vue

@@ -1,5 +1,5 @@
<template>
  <div style="margin: -24px -24px 0px">
  <div class="page-layout">
    <page-header :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
      <slot name="action"  slot="action"></slot>
      <slot slot="content" name="headerContent"></slot>
@@ -50,6 +50,9 @@
</script>

<style lang="less" scoped>
  .page-header{
    margin: -24px -24px 0;
  }
  .link{
    margin-top: 16px;
    line-height: 24px;
@@ -64,11 +67,11 @@
  }
  .page-content{
    position: relative;
    padding: 24px 24px 0;
    &.side{
      padding: 24px 24px 0;
    }
    &.head{
      padding: 24px 0 0;
      margin: 0 auto;
      max-width: 1400px;
    }
  }

 src/pages/exception/403.vue

@@ -9,6 +9,8 @@
}
</script>

<style scoped>

<style scoped lang="less">
  .exception-page{
    margin: -24px 0 0;
  }
</style>

 src/pages/exception/404.vue

@@ -9,6 +9,8 @@
}
</script>

<style scoped>

<style scoped lang="less">
  .exception-page{
    margin: -24px 0 0;
  }
</style>

 src/pages/exception/500.vue

@@ -1,5 +1,5 @@
<template>
    <exception-page type="500" />
  <exception-page type="500" />
</template>

<script>
@@ -9,6 +9,8 @@
}
</script>

<style scoped>

<style scoped lang="less">
  .exception-page{
    margin: -24px 0 0;
  }
</style>

 src/store/modules/setting.js

@@ -11,7 +11,7 @@
    multiPage: true,
    animates: animates,
    animate: {
      name: 'back',
      name: 'bounce',
      direction: 'left'
    }
  },

 src/theme/default/color.less

@@ -1,4 +1,16 @@
@import "../theme";
@import '~ant-design-vue/lib/style/color/colors.less';
@primary: #1890ff;
@primary-color: @primary;
@processing-color: @primary;
@link-color: @primary;

@primary-1: color(~`colorPalette('@{primary}', 1) `);
@primary-2: color(~`colorPalette('@{primary}', 2) `);
@primary-3: color(~`colorPalette('@{primary}', 3) `);
@primary-4: color(~`colorPalette('@{primary}', 4) `);
@primary-5: color(~`colorPalette('@{primary}', 5) `);
@primary-6: color(~`colorPalette('@{primary}', 6) `);
@primary-7: color(~`colorPalette('@{primary}', 7) `);
@primary-8: color(~`colorPalette('@{primary}', 8) `);
@primary-9: color(~`colorPalette('@{primary}', 9) `);
@primary-10: color(~`colorPalette('@{primary}', 10) `);

 src/theme/theme.less

@@ -1 +1 @@
@primary: #1890ff;
@import "./default/index";

 vue.config.js

@@ -1,14 +1,14 @@
// let path = require('path')
let path = require('path')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const getThemeColors = require('./src/utils/themeUtil').getThemeColors
const themeColor = require('./src/config').themeColor

module.exports = {
  // transpileDependencies: ['webpack-theme-color-replacer'],
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // patterns: [path.resolve(__dirname, "./src/theme/theme.less")]
      patterns: []
      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
    }
  },
  configureWebpack: config => {