Skip to content

Commit 0e31950

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ 重构 Curtain 优化控制展示隐藏的实现逻辑 (#895)
1 parent 8e569ac commit 0e31950

4 files changed

Lines changed: 59 additions & 93 deletions

File tree

‎docs/component/curtain.md‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44

55
## 基本用法
66

7-
通过 `value` 属性设置显示隐藏，监听 `@close` 事件修改 `value`，必填项。
7+
通过 `v-model` 属性设置显示隐藏，必填项。
88

99
`src` 为幕帘图片地址（只支持在线地址），值为 `string` 类型，必填项。
1010

1111
`to` 为幕帘点击访问链接，值为 `string` 类型，非必填项。
1212

1313
```html
1414
<wd-button @click="handleClick">展示幕帘</wd-button>
15-
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose"></wd-curtain>
15+
<wd-curtain v-model="value" :src="img" :to="link"></wd-curtain>
1616
```
1717

1818
```typescript
@@ -23,10 +23,6 @@ const link = ref<string>('/pages/index/index')
2323
function handleClick() {
2424
value.value = true
2525
}
26-
27-
function handleClose() {
28-
value.value = false
29-
}
3026
```
3127

3228
## 设置幕帘图片宽高
@@ -35,7 +31,7 @@ function handleClose() {
3531

3632
```html
3733
<wd-button @click="handleClick">展示幕帘</wd-button>
38-
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose" width="280"></wd-curtain>
34+
<wd-curtain v-model="value" :src="img" :to="link" width="280"></wd-curtain>
3935
```
4036

4137
```typescript
@@ -46,10 +42,6 @@ const link = ref<string>('/pages/index/index')
4642
function handleClick() {
4743
value.value = true
4844
}
49-
50-
function handleClose() {
51-
value.value = false
52-
}
5345
```
5446

5547
## 修改关闭按钮位置
@@ -58,7 +50,7 @@ function handleClose() {
5850

5951
```html
6052
<wd-button @click="handleClick">展示幕帘</wd-button>
61-
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose" close-position="top" width="280"></wd-curtain>
53+
<wd-curtain v-model="value" :src="img" :to="link" close-position="top" width="280"></wd-curtain>
6254
```
6355

6456
```typescript
@@ -69,10 +61,6 @@ const link = ref<string>('/pages/index/index')
6961
function handleClick() {
7062
value.value = true
7163
}
72-
73-
function handleClose() {
74-
value.value = false
75-
}
7664
```
7765

7866
## 设置遮罩点击可关闭幕帘
@@ -81,7 +69,7 @@ function handleClose() {
8169

8270
```html
8371
<wd-button @click="handleClick">展示幕帘</wd-button>
84-
<wd-curtain :value="value" :src="img " :to="link" close-position="bottom-right" width="280" @close="handleClose" close-on-click-modal></wd-curtain>
72+
<wd-curtain v-model="value" :src="img" :to="link" close-position="bottom-right" width="280" close-on-click-modal></wd-curtain>
8573
```
8674

8775
```typescript
@@ -92,24 +80,21 @@ const link = ref<string>('/pages/index/index')
9280
function handleClick() {
9381
value.value = true
9482
}
95-
96-
function handleClose() {
97-
value.value = false
98-
}
9983
```
10084

10185
## Attributes
10286

103-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
104-
| -------------------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------ | ------ | -------- |
105-
| value | 绑定值，展示/关闭幕帘 | boolean | - | - | - |
106-
| src | 幕帘图片地址，必须使用网络地址 | string | - | - | - |
107-
| width | 幕帘图片宽度，默认单位 px | number | - | - | - |
108-
| to | 幕帘图片点击链接 | string | - | - | - |
109-
| close-position | 关闭按钮位置 | string | inset / top / bottom / top-left / top-right / bottom-left / bottom-right | inset | - |
110-
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - |
111-
| hide-when-close | 是否当关闭时将弹出层隐藏（display: none） | boolean | - | true | - |
112-
| z-index | 设置层级 | number | - | 10 | 1.4.0 |
87+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
88+
|----------------------|----------------------------------------------------|---------|--------------------------------------------------------------------------|--------|----------|
89+
| value | 绑定值，展示/关闭幕帘（已废弃，请使用 modelValue） | boolean | - | - | - |
90+
| modelValue | 绑定值，展示/关闭幕帘 | boolean | - | - | $LOWEST_VERSION$ |
91+
| src | 幕帘图片地址，必须使用网络地址 | string | - | - | - |
92+
| width | 幕帘图片宽度，默认单位 px | number | - | - | - |
93+
| to | 幕帘图片点击链接 | string | - | - | - |
94+
| close-position | 关闭按钮位置 | string | inset / top / bottom / top-left / top-right / bottom-left / bottom-right | inset | - |
95+
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - |
96+
| hide-when-close | 是否当关闭时将弹出层隐藏（display: none） | boolean | - | true | - |
97+
| z-index | 设置层级 | number | - | 10 | 1.4.0 |
11398

11499
## Events
115100

‎src/pages/curtain/Index.vue‎

Lines changed: 9 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,15 @@
2323
<wd-button @click="handleClick9">自定义关闭按钮</wd-button>
2424
</demo-block>
2525

26-
<wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" :width="280"></wd-curtain>
27-
<wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" :width="200" @close="handleClose2"></wd-curtain>
28-
<wd-curtain :value="value3" :src="img" :to="link" close-position="top" :width="200" @close="handleClose3"></wd-curtain>
29-
<wd-curtain :value="value4" :src="img" :to="link" close-position="top-right" :width="240" @close="handleClose4"></wd-curtain>
30-
<wd-curtain :value="value5" :src="img" :to="link" close-position="bottom-left" :width="240" @close="handleClose5"></wd-curtain>
31-
<wd-curtain :value="value6" :src="img" :to="link" close-position="bottom" :width="240" @close="handleClose6"></wd-curtain>
32-
<wd-curtain :value="value7" :src="img" :to="link" close-position="bottom-right" :width="240" @close="handleClose7"></wd-curtain>
33-
<wd-curtain
34-
:value="value8"
35-
:src="img"
36-
:to="link"
37-
close-position="bottom-right"
38-
:width="240"
39-
@close="handleClose8"
40-
:close-on-click-modal="true"
41-
></wd-curtain>
42-
<wd-curtain :value="value9" :src="img" @close="handleClose9" :width="280">
26+
<wd-curtain v-model="value1" :src="img" :to="link" :width="280"></wd-curtain>
27+
<wd-curtain v-model="value2" :src="img" :to="link" close-position="top-left" :width="200"></wd-curtain>
28+
<wd-curtain v-model="value3" :src="img" :to="link" close-position="top" :width="200"></wd-curtain>
29+
<wd-curtain v-model="value4" :src="img" :to="link" close-position="top-right" :width="240"></wd-curtain>
30+
<wd-curtain v-model="value5" :src="img" :to="link" close-position="bottom-left" :width="240"></wd-curtain>
31+
<wd-curtain v-model="value6" :src="img" :to="link" close-position="bottom" :width="240"></wd-curtain>
32+
<wd-curtain v-model="value7" :src="img" :to="link" close-position="bottom-right" :width="240"></wd-curtain>
33+
<wd-curtain v-model="value8" :src="img" :to="link" close-position="bottom-right" :width="240" :close-on-click-modal="true"></wd-curtain>
34+
<wd-curtain v-model="value9" :src="img" :width="280">
4335
<template #close>
4436
<view class="custom-close" @click="handleClose9">关闭</view>
4537
</template>
@@ -65,62 +57,33 @@ const link = ref<string>('/pages/index/index')
6557
function handleClick1() {
6658
value1.value = true
6759
}
68-
function handleClose1() {
69-
value1.value = false
70-
}
7160
function handleClick2() {
7261
value2.value = true
7362
}
74-
function handleClose2() {
75-
value2.value = false
76-
}
7763
function handleClick3() {
7864
value3.value = true
7965
}
80-
function handleClose3() {
81-
value3.value = false
82-
}
8366
function handleClick4() {
8467
value4.value = true
8568
}
86-
function handleClose4() {
87-
value4.value = false
88-
}
8969
function handleClick5() {
9070
value5.value = true
9171
}
92-
function handleClose5() {
93-
value5.value = false
94-
}
9572
function handleClick6() {
9673
value6.value = true
9774
}
98-
function handleClose6() {
99-
value6.value = false
100-
}
10175
function handleClick7() {
10276
value7.value = true
10377
}
104-
function handleClose7() {
105-
value7.value = false
106-
}
10778
function handleClick8() {
10879
value8.value = true
10980
}
110-
function handleClose8() {
111-
value8.value = false
112-
}
11381
function handleClick9() {
11482
value9.value = true
11583
}
11684
function handleClose9() {
11785
value9.value = false
11886
}
119-
function clickImg() {
120-
uni.navigateTo({
121-
url: '/pages/index/index'
122-
})
123-
}
12487
</script>
12588
<style lang="scss" scoped>
12689
:deep(button) {

‎src/uni_modules/wot-design-uni/components/wd-curtain/types.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/*
2+
* @Author: weisheng
3+
* @Date: 2025-01-25 23:46:29
4+
* @LastEditTime: 2025-02-13 13:16:45
5+
* @LastEditors: weisheng
6+
* @Description:
7+
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
8+
* 记得注释
9+
*/
110
import type { ExtractPropTypes } from 'vue'
211
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
312

@@ -7,8 +16,13 @@ export const curtainProps = {
716
...baseProps,
817
/**
918
* 绑定值，展示/关闭幕帘
19+
* @deprecated 请使用 modelValue
1020
*/
1121
value: makeBooleanProp(false),
22+
/**
23+
* 绑定值，展示/关闭幕帘
24+
*/
25+
modelValue: makeBooleanProp(false),
1226
/**
1327
* 关闭按钮位置，可选值：inset / top / bottom / top-left / top-right / bottom-left / bottom-right
1428
*/

‎src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<view class="wd-curtain-wrapper">
33
<wd-popup
4-
v-model="show"
4+
v-model="modelValue"
55
transition="zoom-in"
66
position="center"
77
:close-on-click-modal="closeOnClickModal"
@@ -51,7 +51,6 @@ import { computed, ref, watch } from 'vue'
5151
import { curtainProps } from './types'
5252
5353
const props = defineProps(curtainProps)
54-
5554
const emit = defineEmits([
5655
'beforeenter',
5756
'enter',
@@ -64,28 +63,33 @@ const emit = defineEmits([
6463
'click-modal',
6564
'load',
6665
'error',
67-
'click'
66+
'click',
67+
'update:modelValue'
6868
])
6969
70-
const show = ref<boolean>(false)
71-
const imgSucc = ref<boolean>(true)
72-
const imgScale = ref<number>(1)
70+
const modelValue = ref(props.modelValue || props.value)
71+
72+
watch(
73+
() => props.modelValue,
74+
(newVal) => {
75+
modelValue.value = newVal
76+
}
77+
)
7378
7479
watch(
7580
() => props.value,
7681
(newVal) => {
77-
if (newVal && imgSucc.value) {
78-
show.value = true
79-
} else {
80-
show.value = false
81-
}
82-
},
83-
{
84-
deep: true,
85-
immediate: true
82+
modelValue.value = newVal
8683
}
8784
)
8885
86+
watch(modelValue, (newVal) => {
87+
emit('update:modelValue', newVal)
88+
})
89+
90+
const imgSucc = ref<boolean>(true)
91+
const imgScale = ref<number>(1)
92+
8993
const imgStyle = computed(() => {
9094
let style = ''
9195
if (props.width) {
@@ -120,7 +124,7 @@ function afterleave() {
120124
}
121125
122126
function close() {
123-
show.value = false
127+
modelValue.value = false
124128
emit('close')
125129
}
126130

0 commit comments

Comments
 (0)