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