欧阳子桐 / RuoYi · 提交

转到一个项目

作者 RuoYi
提交 bc8b5f107906c7fd37ddbf3d20c099ee952cbd87 1 个父辈 5ec5e1a6

优化布局设置使用el-drawer抽屉显示

内嵌 并排对比
正在显示 2 个修改的文件 包含 66 行增加 和 100 行删除
1 <template> 1 <template>
2 - <div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> 2 + <div ref="rightPanel" class="rightPanel-container">
3 <div class="rightPanel-background" /> 3 <div class="rightPanel-background" />
4 <div class="rightPanel"> 4 <div class="rightPanel">
5 <div class="rightPanel-items"> 5 <div class="rightPanel-items">
@@ -10,18 +10,12 @@ @@ -10,18 +10,12 @@
10 </template> 10 </template>
11 11
12 <script> 12 <script>
13 -import { addClass, removeClass } from '@/utils'  
14 -  
15 export default { 13 export default {
16 name: 'RightPanel', 14 name: 'RightPanel',
17 props: { 15 props: {
18 clickNotClose: { 16 clickNotClose: {
19 default: false, 17 default: false,
20 type: Boolean 18 type: Boolean
21 - },  
22 - buttonTop: {  
23 - default: 250,  
24 - type: Number  
25 } 19 }
26 }, 20 },
27 computed: { 21 computed: {
@@ -35,21 +29,13 @@ export default { @@ -35,21 +29,13 @@ export default {
35 value: val 29 value: val
36 }) 30 })
37 } 31 }
38 - },  
39 - theme() {  
40 - return this.$store.state.settings.theme  
41 - }, 32 + }
42 }, 33 },
43 watch: { 34 watch: {
44 show(value) { 35 show(value) {
45 if (value && !this.clickNotClose) { 36 if (value && !this.clickNotClose) {
46 this.addEventClick() 37 this.addEventClick()
47 } 38 }
48 - if (value) {  
49 - addClass(document.body, 'showRightPanel')  
50 - } else {  
51 - removeClass(document.body, 'showRightPanel')  
52 - }  
53 } 39 }
54 }, 40 },
55 mounted() { 41 mounted() {
@@ -65,7 +51,7 @@ export default { @@ -65,7 +51,7 @@ export default {
65 window.addEventListener('click', this.closeSidebar) 51 window.addEventListener('click', this.closeSidebar)
66 }, 52 },
67 closeSidebar(evt) { 53 closeSidebar(evt) {
68 - const parent = evt.target.closest('.rightPanel') 54 + const parent = evt.target.closest('.el-drawer__body')
69 if (!parent) { 55 if (!parent) {
70 this.show = false 56 this.show = false
71 window.removeEventListener('click', this.closeSidebar) 57 window.removeEventListener('click', this.closeSidebar)
@@ -80,14 +66,6 @@ export default { @@ -80,14 +66,6 @@ export default {
80 } 66 }
81 </script> 67 </script>
82 68
83 -<style>  
84 -.showRightPanel {  
85 - overflow: hidden;  
86 - position: relative;  
87 - width: calc(100% - 15px);  
88 -}  
89 -</style>  
90 -  
91 <style lang="scss" scoped> 69 <style lang="scss" scoped>
92 .rightPanel-background { 70 .rightPanel-background {
93 position: fixed; 71 position: fixed;
@@ -113,21 +91,6 @@ export default { @@ -113,21 +91,6 @@ export default {
113 z-index: 40000; 91 z-index: 40000;
114 } 92 }
115 93
116 -.show {  
117 - transition: all .3s cubic-bezier(.7, .3, .1, 1);  
118 -  
119 - .rightPanel-background {  
120 - z-index: 20000;  
121 - opacity: 1;  
122 - width: 100%;  
123 - height: 100%;  
124 - }  
125 -  
126 - .rightPanel {  
127 - transform: translate(0);  
128 - }  
129 -}  
130 -  
131 .handle-button { 94 .handle-button {
132 width: 48px; 95 width: 48px;
133 height: 48px; 96 height: 48px;
1 <template> 1 <template>
2 - <div class="drawer-container">  
3 - <div>  
4 - <div class="setting-drawer-content">  
5 - <div class="setting-drawer-title">  
6 - <h3 class="drawer-title">主题风格设置</h3>  
7 - </div>  
8 - <div class="setting-drawer-block-checbox">  
9 - <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">  
10 - <img src="@/assets/images/dark.svg" alt="dark">  
11 - <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">  
12 - <i aria-label="图标: check" class="anticon anticon-check">  
13 - <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true"  
14 - focusable="false" class="">  
15 - <path  
16 - d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>  
17 - </svg>  
18 - </i>  
19 - </div> 2 + <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
  3 + <div class="drawer-container">
  4 + <div>
  5 + <div class="setting-drawer-content">
  6 + <div class="setting-drawer-title">
  7 + <h3 class="drawer-title">主题风格设置</h3>
20 </div> 8 </div>
21 - <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">  
22 - <img src="@/assets/images/light.svg" alt="light">  
23 - <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">  
24 - <i aria-label="图标: check" class="anticon anticon-check">  
25 - <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true"  
26 - focusable="false" class="">  
27 - <path  
28 - d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>  
29 - </svg>  
30 - </i> 9 + <div class="setting-drawer-block-checbox">
  10 + <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
  11 + <img src="@/assets/images/dark.svg" alt="dark">
  12 + <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
  13 + <i aria-label="图标: check" class="anticon anticon-check">
  14 + <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
  15 + <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
  16 + </svg>
  17 + </i>
  18 + </div>
  19 + </div>
  20 + <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
  21 + <img src="@/assets/images/light.svg" alt="light">
  22 + <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
  23 + <i aria-label="图标: check" class="anticon anticon-check">
  24 + <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
  25 + <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
  26 + </svg>
  27 + </i>
  28 + </div>
31 </div> 29 </div>
32 </div> 30 </div>
33 - </div>  
34 31
35 - <div class="drawer-item">  
36 - <span>主题颜色</span>  
37 - <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> 32 + <div class="drawer-item">
  33 + <span>主题颜色</span>
  34 + <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
  35 + </div>
38 </div> 36 </div>
39 - </div>  
40 37
41 - <el-divider/> 38 + <el-divider/>
42 39
43 - <h3 class="drawer-title">系统布局配置</h3> 40 + <h3 class="drawer-title">系统布局配置</h3>
44 41
45 - <div class="drawer-item">  
46 - <span>开启 TopNav</span>  
47 - <el-switch v-model="topNav" class="drawer-switch" />  
48 - </div> 42 + <div class="drawer-item">
  43 + <span>开启 TopNav</span>
  44 + <el-switch v-model="topNav" class="drawer-switch" />
  45 + </div>
49 46
50 - <div class="drawer-item">  
51 - <span>开启 Tags-Views</span>  
52 - <el-switch v-model="tagsView" class="drawer-switch" />  
53 - </div> 47 + <div class="drawer-item">
  48 + <span>开启 Tags-Views</span>
  49 + <el-switch v-model="tagsView" class="drawer-switch" />
  50 + </div>
54 51
55 - <div class="drawer-item">  
56 - <span>固定 Header</span>  
57 - <el-switch v-model="fixedHeader" class="drawer-switch" />  
58 - </div> 52 + <div class="drawer-item">
  53 + <span>固定 Header</span>
  54 + <el-switch v-model="fixedHeader" class="drawer-switch" />
  55 + </div>
59 56
60 - <div class="drawer-item">  
61 - <span>显示 Logo</span>  
62 - <el-switch v-model="sidebarLogo" class="drawer-switch" />  
63 - </div> 57 + <div class="drawer-item">
  58 + <span>显示 Logo</span>
  59 + <el-switch v-model="sidebarLogo" class="drawer-switch" />
  60 + </div>
64 61
65 - <div class="drawer-item">  
66 - <span>动态标题</span>  
67 - <el-switch v-model="dynamicTitle" class="drawer-switch" />  
68 - </div> 62 + <div class="drawer-item">
  63 + <span>动态标题</span>
  64 + <el-switch v-model="dynamicTitle" class="drawer-switch" />
  65 + </div>
69 66
70 - <el-divider/> 67 + <el-divider/>
71 68
72 - <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>  
73 - <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button> 69 + <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
  70 + <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
  71 + </div>
74 </div> 72 </div>
75 - </div> 73 + </el-drawer>
76 </template> 74 </template>
77 75
78 <script> 76 <script>
@@ -87,6 +85,11 @@ export default { @@ -87,6 +85,11 @@ export default {
87 }; 85 };
88 }, 86 },
89 computed: { 87 computed: {
  88 + visible: {
  89 + get() {
  90 + return this.$store.state.settings.showSettings
  91 + }
  92 + },
90 fixedHeader: { 93 fixedHeader: {
91 get() { 94 get() {
92 return this.$store.state.settings.fixedHeader 95 return this.$store.state.settings.fixedHeader
@@ -232,7 +235,7 @@ export default { @@ -232,7 +235,7 @@ export default {
232 } 235 }
233 236
234 .drawer-container { 237 .drawer-container {
235 - padding: 24px; 238 + padding: 20px;
236 font-size: 14px; 239 font-size: 14px;
237 line-height: 1.5; 240 line-height: 1.5;
238 word-wrap: break-word; 241 word-wrap: break-word;