Skip to content

Commit 33ab0a7

Browse files
qmhcqmhc
committed
feat(confrim): title & content options support specify render function
1 parent 70409fc commit 33ab0a7

File tree

4 files changed

+26
-17
lines changed

4 files changed

+26
-17
lines changed

‎components/confirm/confirm.vue

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,10 @@ function handleReset() {
239239
<template v-else>
240240
<div v-if="state.title" :class="nh.be('header')">
241241
<div :class="nh.be('title')">
242-
{{ state.title }}
242+
<Renderer v-if="typeof state.title === 'function'" :renderer="state.title"></Renderer>
243+
<template v-else>
244+
{{ state.title }}
245+
</template>
243246
</div>
244247
<button
245248
v-if="state.closable"
@@ -280,10 +283,13 @@ function handleReset() {
280283
:icon="(state.cancelable ? icons.question : icons.warning).icon"
281284
></Icon>
282285
</div>
283-
<div v-if="state.parseHtml" :class="nh.be('content')" v-html="state.content"></div>
284-
<div v-else :class="nh.be('content')">
285-
{{ state.content }}
286-
</div>
286+
<Renderer v-if="typeof state.content === 'function'" :renderer="state.content"></Renderer>
287+
<template v-else>
288+
<div v-if="state.parseHtml" :class="nh.be('content')" v-html="state.content"></div>
289+
<div v-else :class="nh.be('content')">
290+
{{ state.content }}
291+
</div>
292+
</template>
287293
</div>
288294
<div :class="[nh.be('footer'), nh.bem('footer', state.actionsAlign)]">
289295
<Button

‎components/confirm/symbol.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export type ConfirmAlign = 'left' | 'center' | 'right'
88
export interface ConfirmState {
99
visible: boolean,
1010
loading: boolean,
11-
title: string,
12-
content: string,
11+
title: string | (() => any),
12+
content: string | (() => any),
1313
icon: Record<string, any> | (() => any) | null | boolean,
1414
iconProps: IconMinorProps,
1515
className: string | Record<string, any>,
@@ -32,6 +32,9 @@ export interface ConfirmState {
3232
left: number | string,
3333
xOffset: number | string,
3434
yOffset: number | string,
35+
/**
36+
* Record the raw option.
37+
*/
3538
raw: Record<any, any>
3639
}
3740

‎docs/en-US/component/confirm.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ type ConfirmAlign = 'left' | 'center' | 'right'
8888
interface ConfirmState {
8989
visible: boolean,
9090
loading: boolean,
91-
title: string,
92-
content: string,
91+
title: string | (() => any),
92+
content: string | (() => any),
9393
icon: Record<string, any> | (() => any) | null | boolean,
9494
iconProps: IconMinorProps,
9595
className: string | Record<string, any>,
@@ -127,8 +127,8 @@ interface ConfirmOptions extends Partial<Omit<ConfirmState, 'visible' | 'loading
127127

128128
| Name | Type | Description | Default | Since |
129129
| --------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------- | -------- |
130-
| title | `string` | Then title of the confirm | `''` | `2.0.15` |
131-
| content | `string` | The prompt content of the confirm | `''` | - |
130+
| title | `string \| (() => any)` | Then title of the confirm, support specify a render function | `''` | `2.0.15` |
131+
| content | `string \| (() => any)` | The prompt content of the confirm, support specify a render function | `''` | - |
132132
| className | `ClassType` | The custom class name for the confirm | `null` | - |
133133
| style | `StyleType` | Inline style for the confirm | `null` | - |
134134
| confirmType | `ConfirmButtonType` | Confirm button type | `'primary'` | - |
@@ -139,7 +139,7 @@ interface ConfirmOptions extends Partial<Omit<ConfirmState, 'visible' | 'loading
139139
| icon | `boolean \| Record<string, any> \| (() => any)` | The icon of the confirm, rendered as the render function when passed in the function | `null` | - |
140140
| iconProps | `IconProps` | The color of the icon of the confirm | `''` | - |
141141
| onBeforeConfirm | `() => unknown` | Set the callback before confirm, supports async function and `Promise`, returns `false` will prevent closing | `null` | - |
142-
| renderer | `ConfirmRenderFn` | Use render function to render custom renderer | `null` | - |
142+
| renderer | `ConfirmRenderFn` | Use render function to render custom content | `null` | - |
143143
| parseHtml | `boolean` | Whether to parse content as html | `false` | `2.0.14` |
144144
| closable | `boolean` | Whether to have a close button | `false` | `2.0.15` |
145145
| contentAlign | `ConfirmAlign` | Alignment of content | `'center'` | `2.0.15` |

‎docs/zh-CN/component/confirm.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ type ConfirmAlign = 'left' | 'center' | 'right'
8888
interface ConfirmState {
8989
visible: boolean,
9090
loading: boolean,
91-
title: string,
92-
content: string,
91+
title: string | (() => any),
92+
content: string | (() => any),
9393
icon: Record<string, any> | (() => any) | null | boolean,
9494
iconProps: IconMinorProps,
9595
className: string | Record<string, any>,
@@ -127,8 +127,8 @@ interface ConfirmOptions extends Partial<Omit<ConfirmState, 'visible' | 'loading
127127

128128
| 名称 | 类型 | 说明 | 默认值 | 始于 |
129129
| --------------- | ----------------------------------------------- | ----------------------------------------------------------------------------- | ---------------- | -------- |
130-
| title | `string` | 确认框的标题 | `''` | `2.0.15` |
131-
| content | `string` | 确认框的提示内容 | `''` | - |
130+
| title | `string \| (() => any)` | 确认框的标题，支持指定渲染函数 | `''` | `2.0.15` |
131+
| content | `string \| (() => any)` | 确认框的提示内容，支持指定渲染函数 | `''` | - |
132132
| className | `ClassType` | 提示的自定义类名 | `null` | - |
133133
| style | `StyleType` | 确认框的内联样式 | `null` | - |
134134
| confirmType | `ConfirmButtonType` | 确认按钮的类型 | `'primary'` | - |
@@ -139,7 +139,7 @@ interface ConfirmOptions extends Partial<Omit<ConfirmState, 'visible' | 'loading
139139
| icon | `boolean \| Record<string, any> \| (() => any)` | 确认框的图标，传入函数时作为 render 函数渲染 | `null` | - |
140140
| iconProps | `IconProps` | 确认框的图标的颜色 | `''` | - |
141141
| onBeforeConfirm | `() => unknown` | 设置确认框的确认前回调，支持异步函数和 `Promise`，返回值为 `false` 会阻止关闭 | `null` | - |
142-
| renderer | `ConfirmRenderFn` | 使用 render 函数渲染自定义渲染 | `null` | - |
142+
| renderer | `ConfirmRenderFn` | 使用 render 函数渲染自定义渲染内容 | `null` | - |
143143
| parseHtml | `boolean` | 是否将 `content` 作为 html 解析 | `false` | `2.0.14` |
144144
| closable | `boolean` | 是否具有关闭按钮 | `false` | `2.0.15` |
145145
| contentAlign | `ConfirmAlign` | 内容的对齐 | `'center'` | `2.0.15` |

0 commit comments

Comments
 (0)