Skip to content

Commit 80682ba

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ MessageBox 新增确认、取消按钮的 ButtonProps 属性 (#761)
✅ Closes: #740
1 parent ea8bc66 commit 80682ba

File tree

7 files changed

+249
-199
lines changed

7 files changed

+249
-199
lines changed

‎docs/component/message-box.md‎

Lines changed: 62 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ function confirm() {
8686
console.log('点击了取消按钮')
8787
})
8888
}
89-
9089
```
9190

9291
## Prompt 弹框
@@ -116,7 +115,6 @@ function prompt() {
116115
console.log(error)
117116
})
118117
}
119-
120118
```
121119

122120
## 插槽
@@ -125,10 +123,10 @@ function prompt() {
125123

126124
```html
127125
<wd-message-box selector="wd-message-box-slot">
128-
<wd-rate custom-class="custom-rate-class" v-model="rate"/>
126+
<wd-rate custom-class="custom-rate-class" v-model="rate" />
129127
</wd-message-box>
130128

131-
<wd-button @click="withSlot">custom</wd-button>
129+
<wd-button @click="withSlot">custom</wd-button>
132130
```
133131

134132
```typescript
@@ -148,7 +146,6 @@ function withSlot() {
148146
console.log(error)
149147
})
150148
}
151-
152149
```
153150

154151
```scss
@@ -167,6 +164,7 @@ function withSlot() {
167164
<wd-message-box />
168165
<wd-button @click="beforeConfirm">beforeConfirm</wd-button>
169166
```
167+
170168
```typescript
171169
import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
172170
const message = useMessage()
@@ -191,7 +189,47 @@ function beforeConfirm() {
191189
console.log(error)
192190
})
193191
}
192+
```
193+
194+
## 自定义操作按钮<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
195+
196+
可以通过按钮属性 `cancel-button-props` 和 `confirm-button-props` 自定义操作按钮的样式，具体参考 [Button Attributes](/component/button.html#attributes)。
197+
198+
```html
199+
<wd-message-box></wd-message-box>
200+
<wd-button @click="withButtonProps">自定义按钮</wd-button>
201+
```
202+
203+
```typescript
204+
function withButtonProps() {
205+
message
206+
.confirm({
207+
msg: '自定义按钮样式',
208+
title: '提示',
209+
cancelButtonProps: {
210+
type: 'error',
211+
customClass: 'custom-shadow'
212+
},
213+
confirmButtonProps: {
214+
type: 'success',
215+
customClass: 'custom-shadow'
216+
}
217+
})
218+
.then(() => {})
219+
.catch((error) => {
220+
console.log(error)
221+
})
222+
}
223+
```
194224

225+
```css
226+
:deep() {
227+
.wd-message-box {
228+
.custom-shadow {
229+
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
230+
}
231+
}
232+
}
195233
```
196234

197235
---
@@ -212,26 +250,27 @@ MessageBox.confirm(options)
212250
MessageBox.prompt(options)
213251
```
214252

215-
216253
## Options Attributes
217254

218-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
219-
| ----------------- | ------------------------------------------------------------- | --------------- | ------------------------ | ---------------- | -------- |
220-
| title | 标题 | string | - | - | - |
221-
| msg | 消息文案 | string | - | - | - |
222-
| type | 弹框类型 | string | alert / confirm / prompt | alert | - |
223-
| closeOnClickModal | 是否支持点击蒙层进行关闭，点击蒙层回调传入的 action 为'modal' | boolean | - | true | - |
224-
| inputType | 当 type 为 prompt 时，输入框类型 | string | - | text | - |
225-
| inputValue | 当 type 为 prompt 时，输入框初始值 | string / number | - | - | - |
226-
| inputPlaceholder | 当 type 为 prompt 时，输入框 placeholder | string | - | 请输入内容 | - |
227-
| inputPattern | 当 type 为 prompt 时，输入框正则校验，点击确定按钮时进行校验 | regex | - | - | - |
228-
| inputValidate | 当 type 为 prompt 时，输入框校验函数，点击确定按钮时进行校验 | function | - | - | - |
229-
| inputError | 当 type 为 prompt 时，输入框检验不通过时的错误提示文案 | string | - | 输入的数据不合法 | - |
230-
| confirmButtonText | 确定按钮文案 | string | - | 确定 | - |
231-
| cancelButtonText | 取消按钮文案 | string | - | 取消 | - |
232-
| selector | 指定唯一标识 | string | - | #wd-message-box | - |
233-
| zIndex | 弹窗层级 | number | - | 99 | - |
234-
| lazyRender | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
255+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
256+
| -------------------- | ------------------------------------------------------------------------------- | --------------- | ------------------------ | ---------------- | ---------------- |
257+
| title | 标题 | string | - | - | - |
258+
| msg | 消息文案 | string | - | - | - |
259+
| type | 弹框类型 | string | alert / confirm / prompt | alert | - |
260+
| closeOnClickModal | 是否支持点击蒙层进行关闭，点击蒙层回调传入的 action 为'modal' | boolean | - | true | - |
261+
| inputType | 当 type 为 prompt 时，输入框类型 | string | - | text | - |
262+
| inputValue | 当 type 为 prompt 时，输入框初始值 | string / number | - | - | - |
263+
| inputPlaceholder | 当 type 为 prompt 时，输入框 placeholder | string | - | 请输入内容 | - |
264+
| inputPattern | 当 type 为 prompt 时，输入框正则校验，点击确定按钮时进行校验 | regex | - | - | - |
265+
| inputValidate | 当 type 为 prompt 时，输入框校验函数，点击确定按钮时进行校验 | function | - | - | - |
266+
| inputError | 当 type 为 prompt 时，输入框检验不通过时的错误提示文案 | string | - | 输入的数据不合法 | - |
267+
| confirmButtonText | 确定按钮文案 | string | - | 确定 | - |
268+
| cancelButtonText | 取消按钮文案 | string | - | 取消 | - |
269+
| selector | 指定唯一标识 | string | - | #wd-message-box | - |
270+
| zIndex | 弹窗层级 | number | - | 99 | - |
271+
| lazyRender | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
272+
| cancel-button-props | 取消按钮的属性，具体参考 [Button Attributes](/component/button.html#attributes) | object | - | - | $LOWEST_VERSION$ |
273+
| confirm-button-props | 确定按钮的属性，具体参考 [Button Attributes](/component/button.html#attributes) | object | - | - | $LOWEST_VERSION$ |
235274

236275
## 外部样式类
237276

‎src/pages/messageBox/Index.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
<demo-block title="使用beforeConfirm钩子，在弹框确认前，可以进行一些操作">
3232
<wd-button @click="beforeConfirm">beforeConfirm</wd-button>
3333
</demo-block>
34+
35+
<demo-block title="通过button-props自定义按钮">
36+
<wd-button @click="withButtonProps">withButtonProps</wd-button>
37+
</demo-block>
3438
</page-wraper>
3539
</template>
3640
<script lang="ts" setup>
@@ -103,6 +107,26 @@ function beforeConfirm() {
103107
})
104108
}
105109
110+
function withButtonProps() {
111+
message
112+
.confirm({
113+
msg: '自定义按钮样式',
114+
title: '提示',
115+
cancelButtonProps: {
116+
type: 'error',
117+
customClass: 'custom-shadow'
118+
},
119+
confirmButtonProps: {
120+
type: 'success',
121+
customClass: 'custom-shadow'
122+
}
123+
})
124+
.then(() => {})
125+
.catch((error) => {
126+
console.log(error)
127+
})
128+
}
129+
106130
function withSlot() {
107131
message1
108132
.confirm({
@@ -121,4 +145,9 @@ function withSlot() {
121145
display: block;
122146
height: 22px;
123147
}
148+
:deep() {
149+
.custom-shadow {
150+
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
151+
}
152+
}
124153
</style>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { PropType } from 'vue'
12
import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
23
import type { FormItemRule } from '../wd-form/types'
34

@@ -7,6 +8,8 @@ export type InputType = 'text' | 'number' | 'digit' | 'idcard'
78

89
export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
910

11+
export type InputSize = 'large'
12+
1013
export const inputProps = {
1114
...baseProps,
1215
customInputClass: makeStringProp(''),
@@ -137,7 +140,7 @@ export const inputProps = {
137140
/**
138141
* 设置输入框大小，可选值：large
139142
*/
140-
size: String,
143+
size: String as PropType<InputSize>,
141144
/**
142145
* 设置输入框错误状态，错误状态时为红色
143146
*/

‎src/uni_modules/wot-design-uni/components/wd-message-box/index.scss‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,12 @@
8787
@include e(actions) {
8888
padding: 24px;
8989
}
90+
91+
@include edeep(actions-btn) {
92+
&:not(:last-child) {
93+
margin-right: 16px;
94+
}
95+
}
9096

9197
@include e(flex) {
9298
display: flex;
@@ -100,22 +106,3 @@
100106
margin-right: 16px;
101107
}
102108
}
103-
104-
.zoomIn-enter-active,
105-
.zoomIn-leave-active {
106-
opacity: 1;
107-
transform: translate3d(-50%, -50%, 0) scale(1);
108-
transition: all .2s;
109-
}
110-
111-
.zoomIn-enter {
112-
opacity: 0;
113-
transform: translate3d(-50%, -50%, 0) scale(0.7);
114-
transition: all .2s ease-out;
115-
}
116-
117-
.zoomIn-leave-to {
118-
opacity: 0;
119-
transform: translate3d(-50%, -50%, 0) scale(0.9);
120-
transition: all .2s ease-out;
121-
}

‎src/uni_modules/wot-design-uni/components/wd-message-box/index.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2022-12-14 17:33:21
4-
* @LastEditTime: 2024-11-05 23:15:31
4+
* @LastEditTime: 2024-12-05 13:23:17
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\index.ts
88
* 记得注释
99
*/
1010
import { inject, provide, ref } from 'vue'
11-
import type { Message, MessageOptions, MessageResult, MessageType } from './types'
11+
import type { Message, MessageOptions, MessageOptionsWithCallBack, MessageResult, MessageType } from './types'
1212
import { deepMerge } from '../common/util'
1313

1414
const messageDefaultOptionKey = '__MESSAGE_OPTION__'
1515

1616
const None = Symbol('None')
1717

1818
// 默认模板
19-
export const defaultOptions: MessageOptions = {
19+
export const defaultOptions: MessageOptionsWithCallBack = {
2020
title: '',
2121
showCancelButton: false,
2222
show: false,
@@ -25,7 +25,6 @@ export const defaultOptions: MessageOptions = {
2525
type: 'alert',
2626
inputType: 'text',
2727
inputValue: '',
28-
inputValidate: null,
2928
showErr: false,
3029
zIndex: 99,
3130
lazyRender: true,
@@ -34,7 +33,7 @@ export const defaultOptions: MessageOptions = {
3433

3534
export function useMessage(selector: string = ''): Message {
3635
const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey
37-
const messageOption = inject(messageOptionKey, ref<MessageOptions | typeof None>(None)) // Message选项
36+
const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack | typeof None>(None)) // Message选项
3837
if (messageOption.value === None) {
3938
messageOption.value = defaultOptions
4039
provide(messageOptionKey, messageOption)
@@ -56,16 +55,16 @@ export function useMessage(selector: string = ''): Message {
5655
const show = (option: MessageOptions | string) => {
5756
// 返回一个promise
5857
return new Promise<MessageResult>((resolve, reject) => {
59-
const options = deepMerge(defaultOptions, typeof option === 'string' ? { title: option } : option) as MessageOptions
58+
const options = deepMerge(defaultOptions, typeof option === 'string' ? { title: option } : option)
6059
messageOption.value = deepMerge(options, {
6160
show: true,
62-
onConfirm: (res: MessageResult) => {
61+
success: (res: MessageResult) => {
6362
resolve(res)
6463
},
65-
onCancel: (res: MessageResult) => {
64+
fail: (res: MessageResult) => {
6665
reject(res)
6766
}
68-
}) as MessageOptions
67+
})
6968
})
7069
}
7170

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2024-04-08 22:34:01
4-
* @LastEditTime: 2024-11-05 23:17:06
4+
* @LastEditTime: 2024-12-05 13:26:50
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\types.ts
88
* 记得注释
99
*/
1010
import { baseProps, makeStringProp } from '../common/props'
11-
import { type InputType } from '../wd-input/types'
11+
import type { ButtonProps } from '../wd-button/types'
12+
import { type InputSize, type InputType } from '../wd-input/types'
1213

1314
export type MessageType = 'alert' | 'confirm' | 'prompt'
1415

@@ -25,8 +26,6 @@ export type MessageOptions = {
2526
* 是否展示取消按钮
2627
*/
2728
showCancelButton?: boolean
28-
29-
show?: boolean
3029
/**
3130
* 是否支持点击蒙层进行关闭，点击蒙层回调传入的action为'modal'
3231
*/
@@ -51,6 +50,10 @@ export type MessageOptions = {
5150
* 当type为prompt时，输入框类型
5251
*/
5352
inputType?: InputType
53+
/**
54+
* 设置输入框大小，可选值：large
55+
*/
56+
inputSize?: InputSize
5457
/**
5558
* 当type为prompt时，输入框初始值
5659
*/
@@ -66,7 +69,7 @@ export type MessageOptions = {
6669
/**
6770
* 当type为prompt时，输入框校验函数，点击确定按钮时进行校验
6871
*/
69-
inputValidate?: InputValidate | null
72+
inputValidate?: InputValidate
7073
/**
7174
* 当type为prompt时，输入框检验不通过时的错误提示文案
7275
*/
@@ -87,6 +90,20 @@ export type MessageOptions = {
8790
* 确认前钩子
8891
*/
8992
beforeConfirm?: (options: MessageBeforeConfirmOption) => void
93+
/**
94+
* 取消按钮Props
95+
*/
96+
cancelButtonProps?: Partial<ButtonProps>
97+
/**
98+
* 确认按钮Props
99+
*/
100+
confirmButtonProps?: Partial<ButtonProps>
101+
}
102+
103+
export type MessageOptionsWithCallBack = MessageOptions & {
104+
show?: boolean
105+
success?: (res: MessageResult) => void
106+
fail?: (res: MessageResult) => void
90107
}
91108

92109
export type ActionType = 'confirm' | 'cancel' | 'modal'

0 commit comments

Comments
 (0)