1.新增动画类型切换效果

loulijun2021

2022-12-31 9481efd2a7cb07b1c97370be736d40213b5f065a

1.新增动画类型切换效果

 src/layout/components/AppMain.vue

@@ -1,10 +1,37 @@
<template>
  <section class="app-main">

    <!--    1.初始类型 fade-transform-->
    <div v-if="$store.state.settings.animationType==='fade-transform'">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    </div>
    <!--2.无类型 none-->
    <div v-else-if="$store.state.settings.animationType==='none'">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </div>
    <!--3.展开折叠类型  el-collapse-transition-->
    <div v-else-if="$store.state.settings.animationType==='el-collapse-transition'">
      <el-collapse-transition>
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </el-collapse-transition>
    </div>
    <!--4.剩下的类型 -->
    <div v-else>
      <transition :name="$store.state.settings.animationType">
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </transition>
    </div>

  </section>
</template>


 src/layout/components/Settings/index.vue

@@ -42,6 +42,25 @@
          inactive-text="浅色"
        />
      </div>
      <div class="drawer-item" style="display: flex;justify-content: space-between">
        <span>动画类型</span>
        <el-select
          v-model="$store.state.settings.animationType"
          :popper-append-to-body="false"
          popper-class="animationTypePopperClass"
          style="width: 120px;"
          placeholder="请选择"
          size="mini"
          @change="animationTypeChange"
        >
          <el-option
            v-for="item in animationTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <!--      此三个功能暂时不用-->
      <!--      <div class="drawer-item">-->
@@ -69,7 +88,18 @@
export default {
  components: { ThemePicker },
  data() {
    return {}
    return {
      animationTypeArr: [
        { label: '默认类型', value: 'fade-transform' },
        { label: '淡入', value: 'el-fade-in-linear' },
        { label: '淡出', value: 'el-fade-in' },
        { label: '中间缩放', value: 'el-zoom-in-center' },
        { label: '顶部缩放', value: 'el-zoom-in-top' },
        { label: '底部缩放', value: 'el-zoom-in-bottom' },
        { label: '展开折叠', value: 'el-collapse-transition' },
        { label: '无动画', value: 'none' }
      ]
    }
  },
  computed: {
    fixedHeader: {
@@ -106,18 +136,26 @@
      }
    }
  },

  methods: {
    themeChange(val) {
      this.$store.dispatch('settings/changeSetting', {
        key: 'theme',
        value: val
      })
    },
    animationTypeChange(val) {
      console.log(val, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .animationTypePopperClass {
  left: auto !important;
}

.drawer-container {
  padding: 24px;
  font-size: 14px;

 src/layout/components/Sidebar/index.vue

@@ -84,7 +84,7 @@
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      console.log(variables, 2333)
      // console.log(variables, 2333)
      // 先输出这个variables值  然后修改其属性值
      variables.menuActiveText = this.$store.state.settings.theme


 src/settings.js

@@ -30,6 +30,8 @@

  menuIsHorizontal: false, // 菜单是否是横屏

  leftBackgroundColorValue: false// 左侧栏背景颜色
  leftBackgroundColorValue: false, // 左侧栏背景颜色

  animationType: 'fade-transform'// 动画类型     初始类型:fade-transform

}

 src/store/modules/settings.js

@@ -8,10 +8,12 @@
  sidebarLogo,
  headBackgroundColorValue,
  menuIsHorizontal,
  leftBackgroundColorValue
  leftBackgroundColorValue,
  animationType
} = defaultSettings

const state = {
  animationType: animationType, // 动画类型
  leftBackgroundColorValue: leftBackgroundColorValue,//左边背景颜色
  headBackgroundColorValue: headBackgroundColorValue, // 头部背景颜色
  menuIsHorizontal: menuIsHorizontal, // 菜单是否是横屏