tjz
7 years ago
36 changed files with 1255 additions and 44 deletions
@ -0,0 +1,23 @@ |
|||||||
|
<cn> |
||||||
|
#### 顶部公告 |
||||||
|
页面顶部通告形式，默认有图标且`type` 为 'warning'。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Banner |
||||||
|
Display Alert as a banner at top of page. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-alert message="Warning text" banner /> |
||||||
|
<br /> |
||||||
|
<a-alert message="Very long warning text warning text text text text text text text" banner closable /> |
||||||
|
<br /> |
||||||
|
<a-alert :showIcon="false" message="Warning text without icon" banner /> |
||||||
|
<br /> |
||||||
|
<a-alert type="error" message="Error text" banner /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
``` |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<cn> |
||||||
|
#### 基本 |
||||||
|
最简单的用法，适用于简短的警告提示。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### basic |
||||||
|
The simplest usage for short messages. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<a-alert message="Success Text" type="success" /> |
||||||
|
</template> |
||||||
|
``` |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
<cn> |
||||||
|
#### 可关闭的警告提示 |
||||||
|
显示关闭按钮，点击可关闭警告提示。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Closable |
||||||
|
To show close button. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-alert |
||||||
|
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text" |
||||||
|
type="warning" |
||||||
|
closable |
||||||
|
@close="onClose" |
||||||
|
/> |
||||||
|
<a-alert |
||||||
|
message="Error Text" |
||||||
|
description="Error Description Error Description Error Description Error Description Error Description Error Description" |
||||||
|
type="error" |
||||||
|
closable |
||||||
|
@close="onClose" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
onClose(e) { |
||||||
|
console.log(e, 'I was closed.'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<cn> |
||||||
|
#### 自定义关闭 |
||||||
|
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Customized Close Text |
||||||
|
Replace the default icon with customized text. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<a-alert message="Info Text" type="info" closeText="Close Now" /> |
||||||
|
</template> |
||||||
|
``` |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<cn> |
||||||
|
#### 含有辅助性文字介绍 |
||||||
|
含有辅助性文字介绍的警告提示。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Description |
||||||
|
Additional description for alert message. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-alert |
||||||
|
message="Success Text" |
||||||
|
type="success" |
||||||
|
> |
||||||
|
<p slot="description"> |
||||||
|
Success Description <span style="color: red">Success</span> Description Success Description |
||||||
|
</p> |
||||||
|
</a-alert> |
||||||
|
<a-alert |
||||||
|
message="Info Text" |
||||||
|
description="Info Description Info Description Info Description Info Description" |
||||||
|
type="info" |
||||||
|
/> |
||||||
|
<a-alert |
||||||
|
message="Warning Text" |
||||||
|
description="Warning Description Warning Description Warning Description Warning Description" |
||||||
|
type="warning" |
||||||
|
/> |
||||||
|
<a-alert |
||||||
|
message="Error Text" |
||||||
|
description="Error Description Error Description Error Description Error Description" |
||||||
|
type="error" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
``` |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
<cn> |
||||||
|
#### 图标 |
||||||
|
可口的图标让信息类型更加醒目。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Icon |
||||||
|
Decent icon make information more clear and more friendly. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-alert message="Success Tips" type="success" showIcon /> |
||||||
|
<a-alert message="Informational Notes" type="info" showIcon /> |
||||||
|
<a-alert message="Warning" type="warning" showIcon /> |
||||||
|
<a-alert message="Error" type="error" showIcon /> |
||||||
|
<a-alert |
||||||
|
message="Success Tips" |
||||||
|
description="Detailed description and advices about successful copywriting." |
||||||
|
type="success" |
||||||
|
showIcon |
||||||
|
/> |
||||||
|
<a-alert |
||||||
|
message="Informational Notes" |
||||||
|
description="Additional description and informations about copywriting." |
||||||
|
type="info" |
||||||
|
showIcon |
||||||
|
/> |
||||||
|
<a-alert |
||||||
|
message="Warning" |
||||||
|
description="This is a warning notice about copywriting." |
||||||
|
type="warning" |
||||||
|
showIcon |
||||||
|
/> |
||||||
|
<a-alert |
||||||
|
message="Error" |
||||||
|
description="This is an error message about copywriting." |
||||||
|
type="error" |
||||||
|
showIcon |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
``` |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
<script> |
||||||
|
import Banner from './banner' |
||||||
|
import Basic from './basic' |
||||||
|
import Closable from './closable' |
||||||
|
import CloseText from './close-text' |
||||||
|
import Description from './description' |
||||||
|
import Icon from './icon' |
||||||
|
import Style from './style' |
||||||
|
|
||||||
|
import CN from '../index.zh-CN.md' |
||||||
|
import US from '../index.en-US.md' |
||||||
|
const md = { |
||||||
|
cn: `# Alert 警告提示 |
||||||
|
警告提示，展现需要关注的信息。 |
||||||
|
## 何时使用 |
||||||
|
- 当某个页面需要向用户显示警告的信息时。 |
||||||
|
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。 |
||||||
|
## 代码演示`, |
||||||
|
us: `# Alert |
||||||
|
Alert component for feedback. |
||||||
|
## When To Use |
||||||
|
- When you need to show alert messages to users. |
||||||
|
- When you need a persistent static container which is closable by user actions. |
||||||
|
`, |
||||||
|
} |
||||||
|
export default { |
||||||
|
category: 'Components', |
||||||
|
subtitle: '警告提示', |
||||||
|
type: 'Feedback', |
||||||
|
title: 'Alert', |
||||||
|
render () { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<md cn={md.cn} us={md.us}/> |
||||||
|
< Banner/> |
||||||
|
<Basic/> |
||||||
|
<Closable/> |
||||||
|
<CloseText/> |
||||||
|
<Description/> |
||||||
|
<Icon/> |
||||||
|
<Style/> |
||||||
|
<api> |
||||||
|
<CN slot='cn' /> |
||||||
|
<US/> |
||||||
|
</api> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style> |
||||||
|
.ant-alert { |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<cn> |
||||||
|
#### 四种样式 |
||||||
|
共有四种样式 `success`、`info`、`warning`、`error`。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### More types |
||||||
|
There are 4 types of Alert: `success`, `info`, `warning`, `error`. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-alert message="Success Text" type="success" /> |
||||||
|
<a-alert message="Info Text" type="info" /> |
||||||
|
<a-alert message="Warning Text" type="warning" /> |
||||||
|
<a-alert message="Error Text" type="error" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
``` |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
| Property | Description | Type | Default | |
||||||
|
| -------- | ----------- | ---- | ------- | |
||||||
|
| banner | Whether to show as banner | boolean | false | |
||||||
|
| closable | Whether Alert can be closed | boolean | - | |
||||||
|
| closeText | Close text to show | string\|slot | - | |
||||||
|
| description | Additional content of Alert | string\|slot | - | |
||||||
|
| message | Content of Alert | string\|slot | - | |
||||||
|
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | |
||||||
|
| iconType | Icon type, effective when `showIcon` is `true` | string | - | |
||||||
|
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | |
||||||
|
|
||||||
|
### events |
||||||
|
| Events Name | Description | Arguments | |
||||||
|
| --- | --- | --- | |
||||||
|
| close | Callback when Alert is closed | Function | |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
<script> |
||||||
|
import Icon from '../icon' |
||||||
|
import classNames from 'classnames' |
||||||
|
import BaseMixin from '../_util/BaseMixin' |
||||||
|
import PropTypes from '../_util/vue-types' |
||||||
|
import getTransitionProps from '../_util/getTransitionProps' |
||||||
|
import { getComponentFromProp } from '../_util/props-util' |
||||||
|
|
||||||
|
export const AlertProps = { |
||||||
|
/** |
||||||
|
* Type of Alert styles, options:`success`, `info`, `warning`, `error` |
||||||
|
*/ |
||||||
|
type: PropTypes.oneOf(['success', 'info', 'warning', 'error']), |
||||||
|
/** Whether Alert can be closed */ |
||||||
|
closable: PropTypes.bool, |
||||||
|
/** Close text to show */ |
||||||
|
closeText: PropTypes.any, |
||||||
|
/** Content of Alert */ |
||||||
|
message: PropTypes.any, |
||||||
|
/** Additional content of Alert */ |
||||||
|
description: PropTypes.any, |
||||||
|
/** Callback when close Alert */ |
||||||
|
// onClose?: React.MouseEventHandler<HTMLAnchorElement>; |
||||||
|
/** Whether to show icon */ |
||||||
|
showIcon: PropTypes.bool, |
||||||
|
iconType: PropTypes.string, |
||||||
|
prefixCls: PropTypes.string, |
||||||
|
banner: PropTypes.bool, |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
props: AlertProps, |
||||||
|
mixins: [BaseMixin], |
||||||
|
name: 'Alert', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
closing: true, |
||||||
|
closed: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleClose (e) { |
||||||
|
e.preventDefault() |
||||||
|
const dom = this.$el |
||||||
|
dom.style.height = `${dom.offsetHeight}px` |
||||||
|
// Magic code |
||||||
|
// 重复一次后才能正确设置 height |
||||||
|
dom.style.height = `${dom.offsetHeight}px` |
||||||
|
|
||||||
|
this.setState({ |
||||||
|
closing: false, |
||||||
|
}) |
||||||
|
this.$emit('close', e) |
||||||
|
}, |
||||||
|
animationEnd () { |
||||||
|
this.setState({ |
||||||
|
closed: true, |
||||||
|
closing: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
render () { |
||||||
|
const { prefixCls = 'ant-alert', banner, closing, closed } = this |
||||||
|
let { closable, type, showIcon, iconType } = this |
||||||
|
const closeText = getComponentFromProp(this, 'closeText') |
||||||
|
const description = getComponentFromProp(this, 'description') |
||||||
|
const message = getComponentFromProp(this, 'message') |
||||||
|
// banner模式默认有 Icon |
||||||
|
showIcon = banner && showIcon === undefined ? true : showIcon |
||||||
|
// banner模式默认为警告 |
||||||
|
type = banner && type === undefined ? 'warning' : type || 'info' |
||||||
|
|
||||||
|
if (!iconType) { |
||||||
|
switch (type) { |
||||||
|
case 'success': |
||||||
|
iconType = 'check-circle' |
||||||
|
break |
||||||
|
case 'info': |
||||||
|
iconType = 'info-circle' |
||||||
|
break |
||||||
|
case 'error': |
||||||
|
iconType = 'cross-circle' |
||||||
|
break |
||||||
|
case 'warning': |
||||||
|
iconType = 'exclamation-circle' |
||||||
|
break |
||||||
|
default: |
||||||
|
iconType = 'default' |
||||||
|
} |
||||||
|
|
||||||
|
// use outline icon in alert with description |
||||||
|
if (description) { |
||||||
|
iconType += '-o' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const alertCls = classNames(prefixCls, { |
||||||
|
[`${prefixCls}-${type}`]: true, |
||||||
|
[`${prefixCls}-close`]: !closing, |
||||||
|
[`${prefixCls}-with-description`]: !!description, |
||||||
|
[`${prefixCls}-no-icon`]: !showIcon, |
||||||
|
[`${prefixCls}-banner`]: !!banner, |
||||||
|
}) |
||||||
|
|
||||||
|
// closeable when closeText is assigned |
||||||
|
if (closeText) { |
||||||
|
closable = true |
||||||
|
} |
||||||
|
|
||||||
|
const closeIcon = closable ? ( |
||||||
|
<a onClick={this.handleClose} class={`${prefixCls}-close-icon`}> |
||||||
|
{closeText || <Icon type='cross' />} |
||||||
|
</a> |
||||||
|
) : null |
||||||
|
const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, { |
||||||
|
appear: false, |
||||||
|
afterLeave: this.animationEnd, |
||||||
|
}) |
||||||
|
return closed ? null : ( |
||||||
|
<transition {...transitionProps}> |
||||||
|
<div v-show={closing} class={alertCls}> |
||||||
|
{showIcon ? <Icon class={`${prefixCls}-icon`} type={iconType} /> : null} |
||||||
|
<span class={`${prefixCls}-message`}>{message}</span> |
||||||
|
<span class={`${prefixCls}-description`}>{description}</span> |
||||||
|
{closeIcon} |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
) |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| --- | --- | --- | --- | |
||||||
|
| banner | 是否用作顶部公告 | boolean | false | |
||||||
|
| closable | 默认不显示关闭按钮 | boolean | 无 | |
||||||
|
| closeText | 自定义关闭按钮 | string\|slot | 无 | |
||||||
|
| description | 警告提示的辅助性文字介绍 | string\|slot | 无 | |
||||||
|
| message | 警告提示内容 | string\|slot | 无 | |
||||||
|
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | |
||||||
|
| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - | |
||||||
|
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | |
||||||
|
|
||||||
|
### 事件 |
||||||
|
| 事件名称 | 说明 | 回调参数 | |
||||||
|
| --- | --- | --- | |
||||||
|
| close | 关闭时触发的回调函数 | Function | |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import '../../style/index.less' |
||||||
|
import './index.less' |
||||||
@ -0,0 +1,169 @@ |
|||||||
|
@import "../../style/themes/default"; |
||||||
|
@import "../../style/mixins/index"; |
||||||
|
|
||||||
|
@alert-prefix-cls: ~"@{ant-prefix}-alert"; |
||||||
|
|
||||||
|
@alert-message-color: @heading-color; |
||||||
|
@alert-text-color: @text-color; |
||||||
|
|
||||||
|
.@{alert-prefix-cls} { |
||||||
|
.reset-component; |
||||||
|
position: relative; |
||||||
|
padding: 8px 15px 8px 37px; |
||||||
|
border-radius: @border-radius-base; |
||||||
|
|
||||||
|
&&-no-icon { |
||||||
|
padding: 8px 15px; |
||||||
|
} |
||||||
|
|
||||||
|
&-icon { |
||||||
|
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px; |
||||||
|
left: 16px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
&-description { |
||||||
|
font-size: @font-size-base; |
||||||
|
line-height: 22px; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&-success { |
||||||
|
border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`; |
||||||
|
background-color: ~`colorPalette("@{success-color}", 1)`; |
||||||
|
.@{alert-prefix-cls}-icon { |
||||||
|
color: @success-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-info { |
||||||
|
border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`; |
||||||
|
background-color: ~`colorPalette("@{info-color}", 1)`; |
||||||
|
.@{alert-prefix-cls}-icon { |
||||||
|
color: @info-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-warning { |
||||||
|
border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`; |
||||||
|
background-color: ~`colorPalette("@{warning-color}", 1)`; |
||||||
|
.@{alert-prefix-cls}-icon { |
||||||
|
color: @warning-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-error { |
||||||
|
border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`; |
||||||
|
background-color: ~`colorPalette("@{error-color}", 1)`; |
||||||
|
.@{alert-prefix-cls}-icon { |
||||||
|
color: @error-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-close-icon { |
||||||
|
font-size: @font-size-sm; |
||||||
|
position: absolute; |
||||||
|
right: 16px; |
||||||
|
top: 8px; |
||||||
|
line-height: 22px; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
.@{iconfont-css-prefix}-cross { |
||||||
|
color: @text-color-secondary; |
||||||
|
transition: color .3s; |
||||||
|
&:hover { |
||||||
|
color: #404040; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-close-text { |
||||||
|
position: absolute; |
||||||
|
right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
&-with-description { |
||||||
|
padding: 15px 15px 15px 64px; |
||||||
|
position: relative; |
||||||
|
border-radius: @border-radius-base; |
||||||
|
color: @text-color; |
||||||
|
line-height: @line-height-base; |
||||||
|
} |
||||||
|
|
||||||
|
&-with-description&-no-icon { |
||||||
|
padding: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
&-with-description &-icon { |
||||||
|
position: absolute; |
||||||
|
top: 16px; |
||||||
|
left: 24px; |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&-with-description &-close-icon { |
||||||
|
position: absolute; |
||||||
|
top: 16px; |
||||||
|
right: 16px; |
||||||
|
cursor: pointer; |
||||||
|
font-size: @font-size-base; |
||||||
|
} |
||||||
|
|
||||||
|
&-with-description &-message { |
||||||
|
font-size: @font-size-lg; |
||||||
|
color: @alert-message-color; |
||||||
|
display: block; |
||||||
|
margin-bottom: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
&-with-description &-description { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
&&-close { |
||||||
|
height: 0 !important; |
||||||
|
margin: 0; |
||||||
|
padding-top: 0; |
||||||
|
padding-bottom: 0; |
||||||
|
transition: all .3s @ease-in-out-circ; |
||||||
|
transform-origin: 50% 0; |
||||||
|
} |
||||||
|
|
||||||
|
&-slide-up-leave { |
||||||
|
animation: antAlertSlideUpOut .3s @ease-in-out-circ; |
||||||
|
animation-fill-mode: both; |
||||||
|
} |
||||||
|
|
||||||
|
&-banner { |
||||||
|
border-radius: 0; |
||||||
|
border: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes antAlertSlideUpIn { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
transform-origin: 0% 0%; |
||||||
|
transform: scaleY(0); |
||||||
|
} |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
transform-origin: 0% 0%; |
||||||
|
transform: scaleY(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes antAlertSlideUpOut { |
||||||
|
0% { |
||||||
|
opacity: 1; |
||||||
|
transform-origin: 0% 0%; |
||||||
|
transform: scaleY(1); |
||||||
|
} |
||||||
|
100% { |
||||||
|
opacity: 0; |
||||||
|
transform-origin: 0% 0%; |
||||||
|
transform: scaleY(0); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 异步关闭 |
||||||
|
点击确定后异步关闭对话框，例如提交表单。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Asynchronously close |
||||||
|
Asynchronously close a modal dialog when a user clicked OK button, for example, |
||||||
|
you can use this pattern when you submit a form. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-button type="primary" @click="showModal">Open</a-button> |
||||||
|
<a-modal |
||||||
|
title="Title" |
||||||
|
:visible="visible" |
||||||
|
@ok="handleOk" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@cancel="handleCancel" |
||||||
|
> |
||||||
|
<p>{{ModalText}}</p> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
ModalText: 'Content of the modal', |
||||||
|
visible: false, |
||||||
|
confirmLoading: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
showModal() { |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
handleOk(e) { |
||||||
|
this.ModalText = 'The modal will be closed after two seconds'; |
||||||
|
this.confirmLoading = true; |
||||||
|
setTimeout(() => { |
||||||
|
this.visible = false; |
||||||
|
this.confirmLoading = false; |
||||||
|
}, 2000); |
||||||
|
}, |
||||||
|
handleCancel(e) { |
||||||
|
console.log('Clicked cancel button'); |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,40 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 确认对话框 |
||||||
|
使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Confirmation modal dialog |
||||||
|
To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to |
||||||
|
delay closing the dialog. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<a-button @click="showConfirm"> |
||||||
|
Confirm |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { Modal } from 'antd' |
||||||
|
const confirm = Modal.confirm |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
showConfirm() { |
||||||
|
confirm({ |
||||||
|
title: 'Do you want to delete these items?', |
||||||
|
content: 'When clicked the OK button, this dialog will be closed after 1 second', |
||||||
|
onOk() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); |
||||||
|
}).catch(() => console.log('Oops errors!')); |
||||||
|
}, |
||||||
|
onCancel() {}, |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,67 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 自定义页脚 |
||||||
|
更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。 |
||||||
|
不需要默认确定取消按钮时，你可以把 `footer` 设为 `null`。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Customized Footer |
||||||
|
A more complex example which define a customized footer button bar, |
||||||
|
the dialog will change to loading state after clicking submit button, when the loading is over, |
||||||
|
the modal dialog will be closed. |
||||||
|
You could set `footer` to `null` if you don't need default footer buttons. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-button type="primary" @click="showModal"> |
||||||
|
Open |
||||||
|
</a-button> |
||||||
|
<a-modal |
||||||
|
v-model="visible" |
||||||
|
title="Title" |
||||||
|
onOk="handleOk" |
||||||
|
> |
||||||
|
<template slot="footer"> |
||||||
|
<a-button key="back" @click="handleCancel">Return</a-button> |
||||||
|
<a-button key="submit" type="primary" :loading="loading" @click="handleOk"> |
||||||
|
Submit |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
<p>Some contents...</p> |
||||||
|
<p>Some contents...</p> |
||||||
|
<p>Some contents...</p> |
||||||
|
<p>Some contents...</p> |
||||||
|
<p>Some contents...</p> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
visible: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
showModal() { |
||||||
|
this.visible = true; |
||||||
|
}, |
||||||
|
handleOk(e) { |
||||||
|
this.loading = true; |
||||||
|
setTimeout(() => { |
||||||
|
this.visible = false; |
||||||
|
this.loading = false; |
||||||
|
}, 3000); |
||||||
|
}, |
||||||
|
handleCancel(e) { |
||||||
|
this.visible = false; |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,63 @@ |
|||||||
|
<script> |
||||||
|
import Async from './async' |
||||||
|
import Basic from './basic' |
||||||
|
import ConfirmPromise from './confirm-promise' |
||||||
|
import Confirm from './confirm' |
||||||
|
import Footer from './footer' |
||||||
|
import Info from './info' |
||||||
|
import Locale from './locale' |
||||||
|
import Manual from './manual' |
||||||
|
import Position from './position' |
||||||
|
|
||||||
|
import CN from '../index.zh-CN.md' |
||||||
|
import US from '../index.en-US.md' |
||||||
|
const md = { |
||||||
|
cn: `# Modal 对话框 |
||||||
|
模态对话框。 |
||||||
|
## 何时使用 |
||||||
|
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 \`Modal\` 在当前页面正中打开一个浮层，承载相应的操作。 |
||||||
|
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 \`antd.Modal.confirm()\` 等方法。 |
||||||
|
## 代码演示`, |
||||||
|
us: `# Modal |
||||||
|
Modal dialogs. |
||||||
|
## When To Use |
||||||
|
When requiring users to interact with the application, but without jumping to a new page and interrupting |
||||||
|
the user's workflow, you can use \`Modal\` to create a new floating layer over the current page to get user |
||||||
|
feedback or display information. |
||||||
|
Additionally, if you need show a simple confirmation dialog, you can use \`antd.Modal.confirm()\`, |
||||||
|
and so on. |
||||||
|
`, |
||||||
|
} |
||||||
|
export default { |
||||||
|
type: 'Feedback', |
||||||
|
category: 'Components', |
||||||
|
subtitle: '对话框', |
||||||
|
title: 'Modal', |
||||||
|
render () { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<md cn={md.cn} us={md.us}/> |
||||||
|
<Async/> |
||||||
|
<Basic/> |
||||||
|
<ConfirmPromise/> |
||||||
|
<Confirm/> |
||||||
|
<Footer/> |
||||||
|
<Info/> |
||||||
|
<Locale/> |
||||||
|
<Manual/> |
||||||
|
<Position/> |
||||||
|
<api> |
||||||
|
<CN slot='cn' /> |
||||||
|
<US/> |
||||||
|
</api> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.code-box-demo .ant-btn { |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 信息提示 |
||||||
|
各种类型的信息提示，只提供一个按钮用于关闭。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Information modal dialog |
||||||
|
In the various types of information modal dialog, only one button to close dialog is provided. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-button @click="info">Info</a-button> |
||||||
|
<a-button @click="success">Success</a-button> |
||||||
|
<a-button @click="error">Error</a-button> |
||||||
|
<a-button @click="warning">Warning</a-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { Modal } from 'antd' |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
info() { |
||||||
|
const h = this.$createElement |
||||||
|
Modal.info({ |
||||||
|
title: 'This is a notification message', |
||||||
|
content: h('div',{}, [ |
||||||
|
h('p', 'some messages...some messages...'), |
||||||
|
h('p', 'some messages...some messages...'), |
||||||
|
]), |
||||||
|
onOk() {}, |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
success() { |
||||||
|
Modal.success({ |
||||||
|
title: 'This is a success message', |
||||||
|
content: ( // JSX support |
||||||
|
<div> |
||||||
|
<p>some messages...some messages...</p> |
||||||
|
<p>some messages...some messages...</p> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
error() { |
||||||
|
Modal.error({ |
||||||
|
title: 'This is an error message', |
||||||
|
content: 'some messages...some messages...', |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
warning() { |
||||||
|
Modal.warning({ |
||||||
|
title: 'This is a warning message', |
||||||
|
content: 'some messages...some messages...', |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,60 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 国际化 |
||||||
|
设置 `okText` 与 `cancelText` 以自定义按钮文字。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Internationalization |
||||||
|
To customize the text of the buttons, you need to set `okText` and `cancelText` props. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-button type="primary" @click="showModal">Modal</a-button> |
||||||
|
<a-modal |
||||||
|
title="Modal" |
||||||
|
v-model="visible" |
||||||
|
@ok="hideModal" |
||||||
|
okText="确认" |
||||||
|
cancelText="取消" |
||||||
|
> |
||||||
|
<p>Bla bla ...</p> |
||||||
|
<p>Bla bla ...</p> |
||||||
|
<p>Bla bla ...</p> |
||||||
|
</a-modal> |
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
<a-button @click="confirm">Confirm</a-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { Modal } from 'antd' |
||||||
|
const confirm = Modal.confirm |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
visible: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
showModal() { |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
hideModal() { |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
confirm() { |
||||||
|
confirm({ |
||||||
|
title: 'Confirm', |
||||||
|
content: 'Bla bla ...', |
||||||
|
okText: '确认', |
||||||
|
cancelText: '取消', |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,31 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 手动移除 |
||||||
|
手动关闭modal。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### Manual to destroy |
||||||
|
Manually destroying a modal. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<a-button @click="success">Success</a-button> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { Modal } from 'antd' |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
success() { |
||||||
|
const modal = Modal.success({ |
||||||
|
title: 'This is a notification message', |
||||||
|
content: 'This modal will be destroyed after 1 second', |
||||||
|
}); |
||||||
|
setTimeout(() => modal.destroy(), 1000); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,92 @@ |
|||||||
|
|
||||||
|
<cn> |
||||||
|
#### 自定义位置 |
||||||
|
使用 `style.top` 或配合其他样式来设置对话框位置。 |
||||||
|
</cn> |
||||||
|
|
||||||
|
<us> |
||||||
|
#### To customize the position of modal |
||||||
|
You can use `style.top` or other styles to set position of modal dialog. |
||||||
|
</us> |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<a-button type="primary" @click="() => setModal1Visible(true)">Display a modal dialog at 20px to Top</a-button> |
||||||
|
<a-modal |
||||||
|
title="20px to Top" |
||||||
|
style="top: 20px;" |
||||||
|
:visible="modal1Visible" |
||||||
|
@ok="() => setModal1Visible(false)" |
||||||
|
@cancel="() => setModal1Visible(false)" |
||||||
|
> |
||||||
|
<p>some contents...</p> |
||||||
|
<p>some contents...</p> |
||||||
|
<p>some contents...</p> |
||||||
|
</a-modal> |
||||||
|
<br /><br /> |
||||||
|
<a-button type="primary" @click="() => modal2Visible = true">Vertically centered modal dialog</a-button> |
||||||
|
<a-modal |
||||||
|
title="Vertically centered modal dialog" |
||||||
|
wrapClassName="vertical-center-modal" |
||||||
|
v-model="modal2Visible" |
||||||
|
@ok="() => modal2Visible = false" |
||||||
|
> |
||||||
|
<p>some contents...</p> |
||||||
|
<p>some contents...</p> |
||||||
|
<p>some contents...</p> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
modal1Visible: false, |
||||||
|
modal2Visible: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
setModal1Visible(modal1Visible) { |
||||||
|
this.modal1Visible = modal1Visible; |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style> |
||||||
|
/* use css to set position of modal */ |
||||||
|
.vertical-center-modal { |
||||||
|
text-align: center; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.vertical-center-modal:before { |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
height: 100%; |
||||||
|
vertical-align: middle; |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.vertical-center-modal .ant-modal { |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
top: 0; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
// Use flex which not working in IE |
||||||
|
.vertical-center-modal { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.vertical-center-modal .ant-modal { |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
*/ |
||||||
|
</style> |
||||||
|
``` |
||||||
|
|
||||||
@ -0,0 +1,69 @@ |
|||||||
|
|
||||||
|
## API |
||||||
|
|
||||||
|
| Property | Description | Type | Default | |
||||||
|
| -------- | ----------- | ---- | ------- | |
||||||
|
| afterClose | Specify a function that will be called when modal is closed completely. | function | - | |
||||||
|
| bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} | |
||||||
|
| cancelText | Text of the Cancel button | string\|slot | `Cancel` | |
||||||
|
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true | |
||||||
|
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | |
||||||
|
| destroyOnClose | Whether to unmount child compenents on onClose | boolean | false | |
||||||
|
| footer | Footer content, set as `:footer="null"` when you don't need default buttons | string\|slot | OK and Cancel buttons | |
||||||
|
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body | |
||||||
|
| mask | Whether show mask or not. | Boolean | true | |
||||||
|
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true | |
||||||
|
| maskStyle | Style for modal's mask element. | object | {} | |
||||||
|
| okText | Text of the OK button | string\|slot | `OK` | |
||||||
|
| okType | Button `type` of the OK button | string | `primary` | |
||||||
|
| style | Style of floating layer, typically used at least for adjusting the position. | object | - | |
||||||
|
| title | The modal dialog's title | string\|slot | - | |
||||||
|
| visible | Whether the modal dialog is visible or not | boolean | false | |
||||||
|
| width | Width of the modal dialog | string\|number | 520 | |
||||||
|
| wrapClassName | The class name of the container of the modal dialog | string | - | |
||||||
|
| zIndex | The `z-index` of the Modal | Number | 1000 | |
||||||
|
|
||||||
|
### events |
||||||
|
| Events Name | Description | Arguments | |
||||||
|
| --- | --- | --- | |
||||||
|
| cancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | |
||||||
|
| ok | Specify a function that will be called when a user clicks the OK button | function(e) | |
||||||
|
|
||||||
|
#### Note |
||||||
|
|
||||||
|
> The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `destroyOnClose` on it. |
||||||
|
|
||||||
|
### Modal.method() |
||||||
|
|
||||||
|
There are five ways to display the information based on the content's nature: |
||||||
|
|
||||||
|
- `Modal.info` |
||||||
|
- `Modal.success` |
||||||
|
- `Modal.error` |
||||||
|
- `Modal.warning` |
||||||
|
- `Modal.confirm` |
||||||
|
|
||||||
|
The items listed above are all functions, expecting a settings object as parameter. |
||||||
|
The properties of the object are follows: |
||||||
|
|
||||||
|
| Property | Description | Type | Default | |
||||||
|
| -------- | ----------- | ---- | ------- | |
||||||
|
| cancelText | Text of the Cancel button | string | `Cancel` | |
||||||
|
| class | class of container | string | - | |
||||||
|
| content | Content | string\|vNode | - | |
||||||
|
| iconType | Icon `type` of the Icon component | string | `question-circle` | |
||||||
|
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | |
||||||
|
| okText | Text of the OK button | string | `OK` | |
||||||
|
| okType | Button `type` of the OK button | string | `primary` | |
||||||
|
| title | Title | string\|vNode | - | |
||||||
|
| width | Width of the modal dialog | string\|number | 416 | |
||||||
|
| zIndex | The `z-index` of the Modal | Number | 1000 | |
||||||
|
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
||||||
|
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
||||||
|
|
||||||
|
All the `Modal.method`s will return a reference, and then we can close the modal dialog by the reference. |
||||||
|
|
||||||
|
```jsx |
||||||
|
const ref = Modal.info(); |
||||||
|
ref.destroy(); |
||||||
|
``` |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
## API |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| --- | --- | --- | --- | |
||||||
|
| afterClose | Modal 完全关闭后的回调 | function | 无 | |
||||||
|
| bodyStyle | Modal body 样式 | object | {} | |
||||||
|
| cancelText | 取消按钮文字 | string\| slot | 取消 | |
||||||
|
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
||||||
|
| confirmLoading | 确定按钮 loading | boolean | 无 | |
||||||
|
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | |
||||||
|
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 | |
||||||
|
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body | |
||||||
|
| mask | 是否展示遮罩 | Boolean | true | |
||||||
|
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
||||||
|
| maskStyle | 遮罩样式 | object | {} | |
||||||
|
| okText | 确认按钮文字 | string\|slot | 确定 | |
||||||
|
| okType | 确认按钮类型 | string | primary | |
||||||
|
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - | |
||||||
|
| title | 标题 | string\|slot | 无 | |
||||||
|
| visible(v-model) | 对话框是否可见 | boolean | 无 | |
||||||
|
| width | 宽度 | string\|number | 520 | |
||||||
|
| wrapClassName | 对话框外层容器的类名 | string | - | |
||||||
|
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
||||||
|
|
||||||
|
### 事件 |
||||||
|
| 事件名称 | 说明 | 回调参数 | |
||||||
|
| --- | --- | --- | |
||||||
|
| cancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | |
||||||
|
| ok | 点击确定回调 | function(e) | |
||||||
|
|
||||||
|
#### 注意 |
||||||
|
|
||||||
|
> `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。 |
||||||
|
|
||||||
|
### Modal.method() |
||||||
|
|
||||||
|
包括： |
||||||
|
|
||||||
|
- `Modal.info` |
||||||
|
- `Modal.success` |
||||||
|
- `Modal.error` |
||||||
|
- `Modal.warning` |
||||||
|
- `Modal.confirm` |
||||||
|
|
||||||
|
以上均为一个函数，参数为 object，具体属性如下： |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||||
|
| --- | --- | --- | --- | |
||||||
|
| cancelText | 取消按钮文字 | string | 取消 | |
||||||
|
| class | 容器类名 | string | - | |
||||||
|
| content | 内容 | string\|vNode | 无 | |
||||||
|
| iconType | 图标 Icon 类型 | string | question-circle | |
||||||
|
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
||||||
|
| okText | 确认按钮文字 | string | 确定 | |
||||||
|
| okType | 确认按钮类型 | string | primary | |
||||||
|
| title | 标题 | string\|vNode | 无 | |
||||||
|
| width | 宽度 | string\|number | 416 | |
||||||
|
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
||||||
|
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
||||||
|
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
||||||
|
|
||||||
|
以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。 |
||||||
|
|
||||||
|
```jsx |
||||||
|
const ref = Modal.info(); |
||||||
|
ref.destroy(); |
||||||
|
``` |
||||||
Loading…
Reference in new issue