Skip to content

Commit 7c36e58

Browse files
PanJiaChenPanJiaChen
committed
r
1 parent 18048d2 commit 7c36e58

File tree

2 files changed

+89
-47
lines changed

2 files changed

+89
-47
lines changed

‎src/components/SidePanel/index.vue

Lines changed: 74 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
<template>
2-
<transition name="rightPanel-animate">
2+
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
3+
<div class="rightPanel-background"/>
34

4-
<div
5-
v-show="value"
6-
ref="rightPanel"
7-
class="vs-content-sidebar">
8-
<div class="rightPanel-background"/>
9-
<div
10-
:class="[`vs-sidebar-${color}`]"
11-
class="vs-sidebar">
12-
<div class="vs-sidebar-items">
13-
<slot/>
14-
</div>
5+
<div :class="[`rightPanel-${color}`]" class="rightPanel">
6+
<div class="handle-button" type="primary" circle @click="show=!show">
7+
<i :class="show?'el-icon-close':'el-icon-setting'" />
8+
</div>
9+
<div class="rightPanel-items">
10+
<slot/>
1511
</div>
1612
</div>
17-
<!-- <el-button type="primary" icon="el-icon-setting" circle/> -->
13+
</div>
1814

19-
</transition>
2015
</template>
2116

2217
<script>
18+
import { addClass, removeClass } from '@/utils'
19+
2320
export default {
2421
name: 'RightPanel',
2522
props: {
@@ -36,11 +33,21 @@ export default {
3633
type: Boolean
3734
}
3835
},
36+
data() {
37+
return {
38+
show: false
39+
}
40+
},
3941
watch: {
40-
value() {
41-
if (this.value && !this.clickNotClose) {
42+
show(value) {
43+
if (value && !this.clickNotClose) {
4244
this.addEventClick()
4345
}
46+
if (value) {
47+
addClass(document.body, 'showRightPanel')
48+
} else {
49+
removeClass(document.body, 'showRightPanel')
50+
}
4451
}
4552
},
4653
mounted() {
@@ -51,9 +58,10 @@ export default {
5158
window.addEventListener('click', this.closeSidebar)
5259
},
5360
closeSidebar(evt) {
54-
const parent = evt.target.closest('.vs-sidebar')
61+
const parent = evt.target.closest('.rightPanel')
62+
console.log(parent)
5563
if (!parent) {
56-
this.$emit('input', false)
64+
this.show = false
5765
window.removeEventListener('click', this.closeSidebar)
5866
}
5967
},
@@ -66,54 +74,73 @@ export default {
6674
}
6775
</script>
6876

69-
<style rel="stylesheet/scss" lang="scss" >
77+
<style rel="stylesheet/scss" lang="scss" scoped>
78+
body {
79+
overflow: hidden;
80+
position: relative;
81+
width: calc(100% - 15px);
82+
83+
}
84+
7085
.rightPanel-background {
86+
opacity: 0;
87+
transition: opacity .3s ease;
7188
background: rgba(0, 0, 0, .2);
72-
width: 100%;
73-
height: 100%;
89+
width: 0;
90+
height: 0;
7491
position: fixed;
75-
z-index: 20000;
76-
transition: all .3s ease;
77-
opacity: 1;
92+
z-index: -1;
7893
}
7994
80-
.vs-sidebar{
81-
background: rgb(255,255,255);
82-
z-index :3000;
95+
.rightPanel {
96+
background: rgb(255, 255, 255);
97+
z-index: 3000;
8398
position: fixed;
8499
height: 100vh;
85100
width: 100%;
86101
max-width: 260px;
87102
top: 0px;
88-
display: flex;
89-
flex-direction: column;
90-
box-shadow: 0px 0px 15px 0px rgba(0,0,0,.05);
103+
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
91104
left: 0px;
92105
transition: all .25s ease;
106+
transform: translate(100%);
93107
z-index: 40000;
94-
left: auto;
95-
right: 0px;
96-
108+
left: auto;
109+
right: 0px;
97110
}
98111
99-
// animations
100-
.rightPanel-animate-enter-active,
101-
.rightPanel-animate-leave-active {
102-
transition: all .25s ease;
103-
.vs-sidebar {
104-
transition: all .25s ease;
112+
.show {
105113
114+
// transition: all .25s ease;
115+
.rightPanel-background {
116+
z-index: 20000;
117+
opacity: 1;
118+
width: 100%;
119+
height: 100%;
106120
}
107-
}
108121
109-
.rightPanel-animate-enter,
110-
.rightPanel-animate-leave-to {
111-
.vs-sidebar-background {
112-
opacity: 0 !important;
113-
}
114-
.vs-sidebar {
115-
transform: translate(100%);
122+
.rightPanel {
123+
transform: translate(0);
116124
}
117125
}
118126
127+
.handle-button {
128+
position: absolute;
129+
left: -48px;
130+
border-radius: 4px 0 0 4px !important;
131+
top: 240px;
132+
width: 48px;
133+
height: 48px;
134+
background: #1890ff;
135+
cursor: pointer;
136+
pointer-events: auto;
137+
z-index: 0;
138+
text-align: center;
139+
color: #fff;
140+
line-height: 48px;
141+
142+
i {
143+
font-size: 20px;
144+
}
145+
}
119146
</style>

‎src/utils/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,21 @@ export function toggleClass(element, className) {
191191
element.className = classString
192192
}
193193

194+
export function hasClass(ele, cls) {
195+
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
196+
}
197+
198+
export function addClass(ele, cls) {
199+
if (!hasClass(ele, cls)) ele.className += ' ' + cls
200+
}
201+
202+
export function removeClass(ele, cls) {
203+
if (hasClass(ele, cls)) {
204+
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
205+
ele.className = ele.className.replace(reg, ' ')
206+
}
207+
}
208+
194209
export const pickerOptions = [
195210
{
196211
text: '今天',

0 commit comments

Comments
 (0)