Skip to content

Commit 25833a8

Browse files
mehaotianmehaotian
committed
fix : 修复 close 触发两遍的bug ,优化 使用方法开关抽屉，废弃打开关闭属性，新增maskClick属性 控制遮罩是否可点击 dcloudio#146 
1 parent bf418f2 commit 25833a8

File tree

6 files changed

+105
-100
lines changed

6 files changed

+105
-100
lines changed

‎plugin/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ class CopyPlugin {
5050
console.log(path.join(filePath, '..'))
5151
console.log(from)
5252
if (path.join(filePath, '..').indexOf(from) === -1) {
53-
console.log('不修改这个文件', filePath)
53+
// console.log('不修改这个文件', filePath)
5454
} else {
55-
console.log('同步文件到:', toFilePath)
55+
// console.log('同步文件到:', toFilePath)
5656
fs.copySync(filePath, toFilePath)
5757
}
5858

‎src/components/uni-drawer/config.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"desc": "抽屉",
55
"url": "drawer",
66
"type": "功能组件",
7-
"edition": "1.0.3",
7+
"edition": "1.0.4",
88
"path": "https://ext.dcloud.net.cn/plugin?id=26",
9-
"update_log": "- 新增 width 属性，仅在vue页面生效"
9+
"update_log": "- 新增 maskClick 属性，点击遮罩是否可以关闭\n- 修复 close 执行两遍的Bug\n- 优化 使用事件来开关抽屉，避免了使用属性开关抽屉在某些场景下打不开抽屉的bug"
1010
}

‎src/components/uni-drawer/readme.md

+19-7
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,30 @@ Drawer 在 ``template`` 中以 **插槽** 形式插入内容
2626

2727
### 属性说明
2828

29-
|属性名 |类型 |默认值 |说明 |
30-
|--- |---- |--- |--- |
31-
|visible|Boolean|false |Drawer的显示状态 |
32-
|mask |Boolean|true |是否显示遮罩 |
33-
|mode |String |left |Drawe滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出）|
34-
|width |Number |220 |Drawe 宽度，仅vue页面设置生效 |
29+
|属性名 |类型 |默认值 |说明 |
30+
|--- |---- |--- |--- |
31+
|visible【废弃】|Boolean|false |Drawer的显示状态，此属性已废弃，请使用方法打开关闭抽屉 |
32+
|mask |Boolean|true |是否显示遮罩 |
33+
|maskClick |Boolean|true |点击遮罩是否可以关闭抽屉 |
34+
|mode |String |left |Drawe滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出）|
35+
|width |Number |220 |Drawe 宽度，仅vue页面设置生效 |
36+
37+
### 方法说明
38+
39+
通过 `ref` 获取组件调用方法
40+
41+
|方法称名 |说明 |
42+
|--- |---- |
43+
|open |打开抽屉 |
44+
|close |关闭抽屉 |
45+
46+
3547

3648
### 事件说明
3749

3850
|事件名 |说明 |返回值 |
3951
|--- |---- |--- |
40-
|@close |组件关闭时触发事件 |- |
52+
|@change|抽屉状态发生变化触发事件 |true：抽屉已经打开；false：抽屉已经关闭； |
4153

4254
Tips
4355

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

+16-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<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" />
3+
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
44
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
55
<slot />
66
</view>
@@ -12,8 +12,8 @@
1212
* Drawer 抽屉
1313
* @description 抽屉侧滑菜单
1414
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
15-
* @property {Boolean} visible = [true|false] Drawer的显示状态
1615
* @property {Boolean} mask = [true | false] 是否显示遮罩
16+
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
1717
* @property {Boolean} mode = [left | right] Drawer 滑出位置
1818
* @value left 从左侧滑出
1919
* @value right 从右侧侧滑出
@@ -23,13 +23,6 @@
2323
export default {
2424
name: 'UniDrawer',
2525
props: {
26-
/**
27-
* 显示状态
28-
*/
29-
visible: {
30-
type: Boolean,
31-
default: false
32-
},
3326
/**
3427
* 显示模式（左、右），只在初始化生效
3528
*/
@@ -43,6 +36,13 @@
4336
mask: {
4437
type: Boolean,
4538
default: true
39+
},
40+
/**
41+
* 遮罩是否可点击关闭
42+
*/
43+
maskClick:{
44+
type: Boolean,
45+
default: true
4646
},
4747
/**
4848
* 抽屉宽度
@@ -61,30 +61,21 @@
6161
drawerWidth: 220
6262
}
6363
},
64-
watch: {
65-
visible(val) {
66-
if (val) {
67-
this.open()
68-
} else {
69-
this.close()
70-
}
71-
}
72-
},
7364
created() {
7465
// #ifndef APP-NVUE
7566
this.drawerWidth = this.width
7667
// #endif
77-
this.visibleSync = this.visible
78-
setTimeout(() => {
79-
this.showDrawer = this.visible
80-
}, 100)
8168
this.rightMode = this.mode === 'right'
8269
},
8370
methods: {
84-
close() {
71+
close(type) {
72+
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
73+
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
8574
this._change('showDrawer', 'visibleSync', false)
8675
},
87-
open() {
76+
open() {
77+
// fixed by mehaotian 处理重复点击打开的事件
78+
if(this.visibleSync) return
8879
this._change('visibleSync', 'showDrawer', true)
8980
},
9081
_change(param1, param2, status) {
@@ -94,7 +85,7 @@
9485
}
9586
this.watchTimer = setTimeout(() => {
9687
this[param2] = status
97-
this.$emit(status ? 'open' : 'close')
88+
this.$emit('change',status)
9889
}, status ? 50 : 300)
9990
}
10091
}

‎src/pages/nvue/drawer/drawer.nvue

+33-32
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<uni-section title="左侧滑出" type="line"></uni-section>
1212
<view class="example-body">
1313
<view class="word-btn draw-cotrol-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"
14-
@click="show('left')"><text class="word-btn-white">显示Drawer</text></view>
15-
<uni-drawer :visible="showLeft" mode="left" :width="320" @close="closeDrawer('left')">
14+
@click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text></view>
15+
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
1616
<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
1717
<uni-list>
1818
<uni-list-item title="Item1" />
@@ -28,16 +28,19 @@
2828
</view>
2929
<!-- #endif -->
3030
<view class="close">
31-
<view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="hide"><text
31+
<view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="closeDrawer('showLeft')"><text
3232
class="word-btn-white">关闭Drawer</text></view>
3333
</view>
3434
</uni-drawer>
3535
</view>
3636
<uni-section title="右侧滑出" type="line"></uni-section>
3737
<view class="example-body">
3838
<view class="word-btn draw-cotrol-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"
39-
@click="show('right')"><text class="word-btn-white">显示Drawer</text></view>
40-
<uni-drawer :visible="showRight" mode="right" @close="closeDrawer('right')">
39+
@click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text></view>
40+
<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
41+
<view class="info">
42+
<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
43+
</view>
4144
<!-- #ifndef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
4245
<uni-list>
4346
<uni-list-item title="Item1" />
@@ -53,7 +56,7 @@
5356
</view>
5457
<!-- #endif -->
5558
<view class="close">
56-
<view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="hide"><text
59+
<view class="word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70" @click="closeDrawer('showRight')"><text
5760
class="word-btn-white">关闭Drawer</text></view>
5861
</view>
5962
</uni-drawer>
@@ -62,48 +65,36 @@
6265
</view>
6366
</template>
6467
<script>
65-
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
66-
import uniList from '@/components/uni-list/uni-list.vue'
67-
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
68-
import uniSection from '@/components/uni-section/uni-section.vue'
69-
import uniIcons from '@/components/uni-icons/uni-icons.vue'
7068
export default {
71-
components: {},
7269
data() {
7370
return {
7471
showRight: false,
7572
showLeft: false
7673
}
7774
},
7875
methods: {
79-
show(e) {
80-
console.log("show", e);
81-
if (e === 'left') {
82-
this.showLeft = true
83-
} else {
84-
this.showRight = true
85-
}
86-
},
87-
hide() {
88-
console.log("hide");
89-
this.showLeft = false
90-
this.showRight = false
76+
// 打开窗口
77+
showDrawer(e) {
78+
this.$refs[e].open()
9179
},
80+
// 关闭窗口
9281
closeDrawer(e) {
93-
if (e === 'left') {
94-
this.showLeft = false
95-
} else {
96-
this.showRight = false
97-
}
82+
this.$refs[e].close()
9883
},
99-
confirm() {}
84+
// 抽屉状态发生变化触发
85+
change(e, type) {
86+
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
87+
this[type] = e
88+
}
10089
},
10190
onNavigationBarButtonTap(e) {
10291
this.showRight = !this.showRight
10392
},
93+
// app端拦截返回事件 ，仅app端生效
10494
onBackPress() {
10595
if (this.showRight || this.showLeft) {
106-
this.hide()
96+
this.$refs.showLeft.close()
97+
this.$refs.showRight.close()
10798
return true
10899
}
109100
}
@@ -169,11 +160,21 @@
169160
/* #ifndef APP-NVUE */
170161
display: flex;
171162
/* #endif */
172-
flex-direction: row;
163+
flex-direction: row;
173164
padding: 0;
174165
}
175166

176167
.draw-cotrol-btn {
177168
flex: 1;
178169
}
170+
171+
.info {
172+
padding: 15px;
173+
color: #666;
174+
}
175+
176+
.info-text {
177+
font-size: 14px;
178+
color: #666;
179+
}
179180
</style>

0 commit comments

Comments
 (0)