Skip to content

Commit ec23867

Browse files
mehaotianmehaotian
committed
Merge branch 'nvue-uni-ui' of github.com:dcloudio/uni-ui into nvue-uni-ui
2 parents b9a6d9e + 9c41606 commit ec23867

6 files changed

Lines changed: 327 additions & 258 deletions

File tree

‎src/components/uni-drawer/uni-drawer.vue‎

Lines changed: 130 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,147 @@
11
<template>
2-
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer">
3-
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close" />
4-
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}">
5-
<slot />
6-
</view>
7-
</view>
2+
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer">
3+
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close" />
4+
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}">
5+
<slot />
6+
</view>
7+
</view>
88
</template>
99

1010
<script>
11-
export default {
12-
name: 'UniDrawer',
13-
props: {
14-
/**
15-
* 显示状态
16-
*/
17-
visible: {
18-
type: Boolean,
19-
default: false
20-
},
21-
/**
22-
* 显示模式（左、右），只在初始化生效
23-
*/
24-
mode: {
25-
type: String,
26-
default: ''
27-
},
28-
/**
29-
* 蒙层显示状态
30-
*/
31-
mask: {
32-
type: Boolean,
33-
default: true
34-
}
35-
},
36-
data() {
37-
return {
38-
visibleSync: false,
39-
showDrawer: false,
40-
rightMode: false,
41-
closeTimer: null,
42-
watchTimer: null
43-
}
44-
},
45-
watch: {
46-
visible(val) {
47-
if(val){
48-
this.open()
49-
}else{
50-
this.close()
51-
}
52-
}
53-
},
54-
created() {
55-
this.visibleSync = this.visible
56-
setTimeout(() => {
57-
this.showDrawer = this.visible
58-
}, 100)
59-
this.rightMode = this.mode === 'right'
60-
},
61-
methods: {
62-
close() {
63-
this._change('showDrawer','visibleSync',false)
64-
},
65-
open(){
66-
this._change('visibleSync','showDrawer',true)
67-
},
68-
_change(param1,param2,status){
69-
this[param1] = status
70-
this.$nextTick(()=>{
71-
setTimeout(() => {
72-
this[param2] = status
73-
this.$emit(status?'open':'close')
74-
}, 100)
75-
})
76-
}
77-
}
78-
}
11+
export default {
12+
name: 'UniDrawer',
13+
props: {
14+
/**
15+
* 显示状态
16+
*/
17+
visible: {
18+
type: Boolean,
19+
default: false
20+
},
21+
/**
22+
* 显示模式（左、右），只在初始化生效
23+
*/
24+
mode: {
25+
type: String,
26+
default: ''
27+
},
28+
/**
29+
* 蒙层显示状态
30+
*/
31+
mask: {
32+
type: Boolean,
33+
default: true
34+
}
35+
},
36+
data() {
37+
return {
38+
visibleSync: false,
39+
showDrawer: false,
40+
rightMode: false,
41+
watchTimer: null
42+
}
43+
},
44+
watch: {
45+
visible(val) {
46+
if (val) {
47+
this.open()
48+
} else {
49+
this.close()
50+
}
51+
}
52+
},
53+
created() {
54+
this.visibleSync = this.visible
55+
setTimeout(() => {
56+
this.showDrawer = this.visible
57+
}, 100)
58+
this.rightMode = this.mode === 'right'
59+
},
60+
methods: {
61+
close() {
62+
this._change('showDrawer', 'visibleSync', false)
63+
},
64+
open() {
65+
this._change('visibleSync', 'showDrawer', true)
66+
},
67+
_change(param1, param2, status) {
68+
this[param1] = status
69+
if(this.watchTimer){
70+
clearTimeout(this.watchTimer)
71+
}
72+
this.watchTimer = setTimeout(() => {
73+
this[param2] = status
74+
this.$emit(status ? 'open' : 'close')
75+
}, status ? 50 : 300)
76+
}
77+
}
78+
}
7979
</script>
8080

8181
<style lang="scss" scoped>
82-
@import '@/uni.scss';
82+
@import '@/uni.scss';
8383
84-
$drawer-width: 220px;
84+
// 抽屉宽度
85+
$drawer-width: 220px;
8586
86-
.uni-drawer {
87-
/* #ifndef APP-NVUE */
88-
display: block;
89-
/* #endif */
90-
position: fixed;
91-
top: 0;
92-
left: 0;
93-
right: 0;
94-
bottom: 0;
95-
overflow: hidden;
96-
z-index: 999;
97-
}
87+
.uni-drawer {
88+
/* #ifndef APP-NVUE */
89+
display: block;
90+
/* #endif */
91+
position: fixed;
92+
top: 0;
93+
left: 0;
94+
right: 0;
95+
bottom: 0;
96+
overflow: hidden;
97+
z-index: 999;
98+
}
9899
99-
.uni-drawer__content {
100-
/* #ifndef APP-NVUE */
101-
display: block;
102-
/* #endif */
103-
position: absolute;
104-
top: 0;
105-
width: $drawer-width;
106-
bottom: 0;
107-
background-color: $uni-bg-color;
108-
transition: transform 0.3s ease;
109-
}
100+
.uni-drawer__content {
101+
/* #ifndef APP-NVUE */
102+
display: block;
103+
/* #endif */
104+
position: absolute;
105+
top: 0;
106+
width: $drawer-width;
107+
bottom: 0;
108+
background-color: $uni-bg-color;
109+
transition: transform 0.3s ease;
110+
}
110111
111-
.uni-drawer--left {
112-
left: 0;
113-
transform: translateX(-220px);
114-
}
112+
.uni-drawer--left {
113+
left: 0;
114+
transform: translateX(-$drawer-width);
115+
}
115116
116-
.uni-drawer--right {
117-
right: 0;
118-
transform: translateX(220px);
119-
}
117+
.uni-drawer--right {
118+
right: 0;
119+
transform: translateX($drawer-width);
120+
}
120121
121-
.uni-drawer__content--visible {
122-
transform: translateX(0);
123-
}
122+
.uni-drawer__content--visible {
123+
transform: translateX(0px);
124+
}
124125
125126
126-
.uni-drawer__mask {
127-
/* #ifndef APP-NVUE */
128-
display: block;
129-
/* #endif */
130-
opacity: 0;
131-
position: absolute;
132-
top: 0;
133-
left: 0;
134-
bottom: 0;
135-
right: 0;
136-
background-color: $uni-bg-color-mask;
137-
transition: opacity 0.3s;
138-
}
127+
.uni-drawer__mask {
128+
/* #ifndef APP-NVUE */
129+
display: block;
130+
/* #endif */
131+
opacity: 0;
132+
position: absolute;
133+
top: 0;
134+
left: 0;
135+
bottom: 0;
136+
right: 0;
137+
background-color: $uni-bg-color-mask;
138+
transition: opacity 0.3s;
139+
}
139140
140-
.uni-drawer__mask--visible {
141-
/* #ifndef APP-NVUE */
142-
display: block;
143-
/* #endif */
144-
opacity: 1;
145-
}
141+
.uni-drawer__mask--visible {
142+
/* #ifndef APP-NVUE */
143+
display: block;
144+
/* #endif */
145+
opacity: 1;
146+
}
146147
</style>

0 commit comments

Comments
 (0)