From 9481efd2a7cb07b1c97370be736d40213b5f065a Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 31 十二月 2022 16:21:20 +0800
Subject: [PATCH] 1.新增动画类型切换效果
---
src/settings.js | 4 +
src/layout/components/AppMain.vue | 35 +++++++++++++++--
src/layout/components/Sidebar/index.vue | 2
src/layout/components/Settings/index.vue | 40 +++++++++++++++++++
src/store/modules/settings.js | 6 ++-
5 files changed, 78 insertions(+), 9 deletions(-)
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 766bb6d..0cec99b 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,10 +1,37 @@
<template>
<section class="app-main">
- <transition name="fade-transform" mode="out-in">
+
+ <!-- 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>
- </transition>
+ </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>
@@ -32,7 +59,7 @@
overflow: hidden;
}
-.fixed-header+.app-main {
+.fixed-header + .app-main {
padding-top: 50px;
}
@@ -42,7 +69,7 @@
min-height: calc(100vh - 84px);
}
- .fixed-header+.app-main {
+ .fixed-header + .app-main {
padding-top: 84px;
}
}
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 38d6331..bf4ec0a 100644
--- a/src/layout/components/Settings/index.vue
+++ b/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;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 7b27013..f8c7610 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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)
// 鍏堣緭鍑鸿繖涓獀ariables鍊� 鐒跺悗淇敼鍏跺睘鎬у��
variables.menuActiveText = this.$store.state.settings.theme
diff --git a/src/settings.js b/src/settings.js
index 3679656..e0797d1 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -30,6 +30,8 @@
menuIsHorizontal: false, // 鑿滃崟鏄惁鏄í灞�
- leftBackgroundColorValue: false// 宸︿晶鏍忚儗鏅鑹�
+ leftBackgroundColorValue: false, // 宸︿晶鏍忚儗鏅鑹�
+
+ animationType: 'fade-transform'// 鍔ㄧ敾绫诲瀷 鍒濆绫诲瀷:fade-transform
}
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index ee727e7..bc708b8 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -8,11 +8,13 @@
sidebarLogo,
headBackgroundColorValue,
menuIsHorizontal,
- leftBackgroundColorValue
+ leftBackgroundColorValue,
+ animationType
} = defaultSettings
const state = {
- leftBackgroundColorValue: leftBackgroundColorValue,//宸﹁竟鑳屾櫙棰滆壊
+ animationType: animationType, // 鍔ㄧ敾绫诲瀷
+ leftBackgroundColorValue: leftBackgroundColorValue, // 宸﹁竟鑳屾櫙棰滆壊
headBackgroundColorValue: headBackgroundColorValue, // 澶撮儴鑳屾櫙棰滆壊
menuIsHorizontal: menuIsHorizontal, // 鑿滃崟鏄惁鏄í灞�
theme: variables.theme,
--
Gitblit v1.9.3