Skip to content

Commit 7bc3592

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ Curtain 幕帘新增 close 插槽和自定义关闭插槽样式类 (#746)
✅ Closes: #648
1 parent 09f7f9c commit 7bc3592

File tree

4 files changed

+97
-62
lines changed

4 files changed

+97
-62
lines changed

‎docs/component/curtain.md‎

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
一般用于公告类的图片弹窗。
66

7-
87
## 基本用法
98

109
通过 `value` 属性设置显示隐藏，监听 `@close` 事件修改 `value`，必填项。
@@ -17,7 +16,8 @@
1716
<wd-button @click="handleClick">展示幕帘</wd-button>
1817
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose"></wd-curtain>
1918
```
20-
``` typescript
19+
20+
```typescript
2121
const value = ref<boolean>(false)
2222
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
2323
const link = ref<string>('/pages/index/index')
@@ -39,7 +39,8 @@ function handleClose() {
3939
<wd-button @click="handleClick">展示幕帘</wd-button>
4040
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose" width="280"></wd-curtain>
4141
```
42-
``` typescript
42+
43+
```typescript
4344
const value = ref<boolean>(false)
4445
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
4546
const link = ref<string>('/pages/index/index')
@@ -61,7 +62,8 @@ function handleClose() {
6162
<wd-button @click="handleClick">展示幕帘</wd-button>
6263
<wd-curtain :value="value" :src="img " :to="link" @close="handleClose" close-position="top" width="280"></wd-curtain>
6364
```
64-
``` typescript
65+
66+
```typescript
6567
const value = ref<boolean>(false)
6668
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
6769
const link = ref<string>('/pages/index/index')
@@ -83,7 +85,8 @@ function handleClose() {
8385
<wd-button @click="handleClick">展示幕帘</wd-button>
8486
<wd-curtain :value="value" :src="img " :to="link" close-position="bottom-right" width="280" @close="handleClose" close-on-click-modal></wd-curtain>
8587
```
86-
``` typescript
88+
89+
```typescript
8790
const value = ref<boolean>(false)
8891
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
8992
const link = ref<string>('/pages/index/index')
@@ -99,36 +102,43 @@ function handleClose() {
99102

100103
## Attributes
101104

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

113116
## Events
114117

115-
| 事件名称 | 说明 | 参数 | 最低版本 |
116-
|---------|-----|-----|---------|
117-
| click | 点击幕帘时触发 | - | - |
118-
| close | 弹出层关闭时触发 | - | - |
119-
| click-modal | 点击遮罩时触发 | - | - |
120-
| beforeenter | 进入前触发 | - | - |
121-
| enter | 进入时触发 | - | - |
122-
| afterenter | 进入后触发 | - | - |
123-
| beforeleave | 离开前触发 | - | - |
124-
| leave | 离开时触发 | - | - |
125-
| afterleave | 离开后触发| - | - |
126-
| load | 图片加载完成事件 | - | - |
127-
| error | 图片加载失败事件，若图片加载失败，则不会展示幕帘组件，即使设置 `value` 为 true | - | - |
118+
| 事件名称 | 说明 | 参数 | 最低版本 |
119+
| ----------- | ------------------------------------------------------------------------------ | ---- | -------- |
120+
| click | 点击幕帘时触发 | - | - |
121+
| close | 弹出层关闭时触发 | - | - |
122+
| click-modal | 点击遮罩时触发 | - | - |
123+
| beforeenter | 进入前触发 | - | - |
124+
| enter | 进入时触发 | - | - |
125+
| afterenter | 进入后触发 | - | - |
126+
| beforeleave | 离开前触发 | - | - |
127+
| leave | 离开时触发 | - | - |
128+
| afterleave | 离开后触发 | - | - |
129+
| load | 图片加载完成事件 | - | - |
130+
| error | 图片加载失败事件，若图片加载失败，则不会展示幕帘组件，即使设置 `value` 为 true | - | - |
131+
132+
## Slots
133+
134+
| name | 说明 | 最低版本 |
135+
| ----- | ------------ | ---------------- |
136+
| close | 关闭按钮插槽 | $LOWEST_VERSION$ |
128137

129138
## 外部样式类
130139

131-
| 类名 | 说明 | 最低版本 |
132-
|-----|------|--------|
133-
| custom-class | 根节点样式 | - |
134-
140+
| 类名 | 说明 | 最低版本 |
141+
| ------------------ | -------------- | ---------------- |
142+
| custom-class | 根节点样式 | - |
143+
| custom-close-class | 关闭按钮样式类 | $LOWEST_VERSION$ |
144+
| custom-close-style | 关闭按钮样式 | $LOWEST_VERSION$ |

‎src/pages/curtain/Index.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
<wd-button @click="handleClick8">点击遮罩关闭</wd-button>
2020
</demo-block>
2121

22+
<demo-block title="自定义关闭按钮">
23+
<wd-button @click="handleClick9">自定义关闭按钮</wd-button>
24+
</demo-block>
25+
2226
<wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" :width="280"></wd-curtain>
2327
<wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" :width="200" @close="handleClose2"></wd-curtain>
2428
<wd-curtain :value="value3" :src="img" :to="link" close-position="top" :width="200" @close="handleClose3"></wd-curtain>
@@ -35,6 +39,11 @@
3539
@close="handleClose8"
3640
:close-on-click-modal="true"
3741
></wd-curtain>
42+
<wd-curtain :value="value9" :src="img" @close="handleClose9" :width="280">
43+
<template #close>
44+
<view class="custom-close" @click="handleClose9">关闭</view>
45+
</template>
46+
</wd-curtain>
3847
</page-wraper>
3948
</template>
4049
<script lang="ts" setup>
@@ -48,6 +57,8 @@ const value5 = ref<boolean>(false)
4857
const value6 = ref<boolean>(false)
4958
const value7 = ref<boolean>(false)
5059
const value8 = ref<boolean>(false)
60+
const value9 = ref<boolean>(false)
61+
5162
const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
5263
const link = ref<string>('/pages/index/index')
5364
@@ -99,6 +110,12 @@ function handleClick8() {
99110
function handleClose8() {
100111
value8.value = false
101112
}
113+
function handleClick9() {
114+
value9.value = true
115+
}
116+
function handleClose9() {
117+
value9.value = false
118+
}
102119
function clickImg() {
103120
uni.navigateTo({
104121
url: '/pages/index/index'
@@ -109,4 +126,11 @@ function clickImg() {
109126
:deep(button) {
110127
margin: 0 10px 10px 0;
111128
}
129+
.custom-close {
130+
position: absolute;
131+
top: 10px;
132+
right: 10px;
133+
color: #ffffff;
134+
font-size: 32rpx;
135+
}
112136
</style>

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,19 @@ export const curtainProps = {
3838
* 类型：number
3939
* 默认值：10
4040
*/
41-
zIndex: makeNumberProp(10)
41+
zIndex: makeNumberProp(10),
42+
/**
43+
* 自定义关闭按钮的类名
44+
* 类型：string
45+
* 默认值：''
46+
*/
47+
customCloseClass: makeStringProp(''),
48+
/**
49+
* 自定义关闭按钮的样式
50+
* 类型：string
51+
* 默认值：''
52+
*/
53+
customCloseStyle: makeStringProp('')
4254
}
4355

4456
export type CurtainProps = ExtractPropTypes<typeof curtainProps>

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

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,14 @@
2020
>
2121
<view class="wd-curtain__content">
2222
<image :src="src" class="wd-curtain__content-img" :style="imgStyle" @click="clickImage" @error="imgErr" @load="imgLoad"></image>
23-
<wd-icon name="close-outline" :custom-class="`wd-curtain__content-close ${closePosition}`" @click="close" />
23+
<slot name="close">
24+
<wd-icon
25+
name="close-outline"
26+
:custom-class="`wd-curtain__content-close ${closePosition} ${customCloseClass}`"
27+
:custom-style="customCloseStyle"
28+
@click="close"
29+
/>
30+
</slot>
2431
</view>
2532
</wd-popup>
2633
</view>
@@ -40,7 +47,7 @@ export default {
4047
<script lang="ts" setup>
4148
import wdIcon from '../wd-icon/wd-icon.vue'
4249
import wdPopup from '../wd-popup/wd-popup.vue'
43-
import { ref, watch } from 'vue'
50+
import { computed, ref, watch } from 'vue'
4451
import { curtainProps } from './types'
4552
4653
const props = defineProps(curtainProps)
@@ -62,48 +69,31 @@ const emit = defineEmits([
6269
6370
const show = ref<boolean>(false)
6471
const imgSucc = ref<boolean>(true)
65-
const imgStyle = ref<string>('')
6672
const imgScale = ref<number>(1)
6773
6874
watch(
6975
() => props.value,
70-
() => {
71-
computedShowImg()
76+
(newVal) => {
77+
if (newVal && imgSucc.value) {
78+
show.value = true
79+
} else {
80+
show.value = false
81+
}
7282
},
7383
{
7484
deep: true,
7585
immediate: true
7686
}
7787
)
7888
79-
watch(
80-
() => props.width,
81-
() => {
82-
computeImgStyle()
83-
},
84-
{
85-
deep: true,
86-
immediate: true
87-
}
88-
)
89-
90-
function computedShowImg() {
91-
if (props.value && imgSucc.value) {
92-
show.value = true
93-
} else {
94-
show.value = false
95-
close()
96-
}
97-
}
98-
99-
function computeImgStyle() {
89+
const imgStyle = computed(() => {
10090
let style = ''
10191
if (props.width) {
10292
style += `width: ${props.width}px ;`
10393
style += `height: ${props.width / imgScale.value}px`
10494
}
105-
imgStyle.value = style
106-
}
95+
return style
96+
})
10797
10898
function beforeenter() {
10999
emit('beforeenter')
@@ -142,7 +132,6 @@ function imgLoad(event: any) {
142132
const { height, width } = event.detail
143133
imgScale.value = width / height
144134
imgSucc.value = true
145-
computeImgStyle()
146135
emit('load')
147136
}
148137
function imgErr() {

0 commit comments

Comments
 (0)