From 72932dd999c97b14fa561002d332520985178cf5 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 06 一月 2023 11:31:38 +0800
Subject: [PATCH] 1.表格拖动加上

---
 src/layout/components/Settings/index.vue |   69 ++++++++++++++++++++++++++++++++++
 1 files changed, 68 insertions(+), 1 deletions(-)

diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 404c2b4..3502a32 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -19,6 +19,48 @@
           inactive-text="娴呰壊"
         />
       </div>
+      <div class="drawer-item" style="display: flex;justify-content: space-between">
+        <span>鑿滃崟妯″紡</span>
+        <el-switch
+          v-model="$store.state.settings.menuIsHorizontal"
+          style="display: block"
+          :active-color="$store.state.settings.theme"
+          inactive-color="#ccc"
+          active-text="妯悜"
+          inactive-text="绔栧悜"
+          @change="sidebar.opened=true"
+        />
+      </div>
+      <div class="drawer-item" style="display: flex;justify-content: space-between">
+        <span>宸︿晶棰滆壊</span>
+        <el-switch
+          v-model="$store.state.settings.leftBackgroundColorValue"
+          style="display: block"
+          active-color="#304156"
+          :disabled="$store.state.settings.menuIsHorizontal"
+          inactive-color="#ccc"
+          active-text="娣辫壊"
+          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"
+        >
+          <el-option
+            v-for="item in animationTypeArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
 
       <!--      姝や笁涓姛鑳芥殏鏃朵笉鐢�-->
       <!--      <div class="drawer-item">-->
@@ -42,13 +84,33 @@
 
 <script>
 import ThemePicker from '@/components/ThemePicker'
+import { mapGetters } from 'vuex'
 
 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' }
+      ]
+    }
+  },
+  mounted() {
+    if (this.$store.state.settings.menuIsHorizontal) {
+      this.sidebar.opened = true
+    }
   },
   computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
     fixedHeader: {
       get() {
         return this.$store.state.settings.fixedHeader
@@ -83,6 +145,7 @@
       }
     }
   },
+
   methods: {
     themeChange(val) {
       this.$store.dispatch('settings/changeSetting', {
@@ -95,6 +158,10 @@
 </script>
 
 <style lang="scss" scoped>
+::v-deep .animationTypePopperClass {
+  left: auto !important;
+}
+
 .drawer-container {
   padding: 24px;
   font-size: 14px;

--
Gitblit v1.9.3