欧阳子桐 / RuoYi · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 2 个修改的文件 包含 15 行增加 和 49 行删除
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 + <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
2 <div class="drawer-container"> 3 <div class="drawer-container">
3 <div> 4 <div>
4 <div class="setting-drawer-content"> 5 <div class="setting-drawer-content">
@@ -10,10 +11,8 @@ @@ -10,10 +11,8 @@
10 <img src="@/assets/images/dark.svg" alt="dark"> 11 <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 <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 <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"/> 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"/>
17 </svg> 16 </svg>
18 </i> 17 </i>
19 </div> 18 </div>
@@ -22,10 +21,8 @@ @@ -22,10 +21,8 @@
22 <img src="@/assets/images/light.svg" alt="light"> 21 <img src="@/assets/images/light.svg" alt="light">
23 <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> 22 <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
24 <i aria-label="图标: check" class="anticon anticon-check"> 23 <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"/> 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"/>
29 </svg> 26 </svg>
30 </i> 27 </i>
31 </div> 28 </div>
@@ -73,6 +70,7 @@ @@ -73,6 +70,7 @@
73 <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button> 70 <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
74 </div> 71 </div>
75 </div> 72 </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;