add modal doc and alert
tjz
parent
64a350bf38
commit
816fe56d5f
|
|
@ -40,18 +40,25 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
renderComponent (props, ready) {
|
||||
renderComponent (props = {}, ready) {
|
||||
const { visible, getComponent, forceRender, getContainer, parent } = this
|
||||
const self = this
|
||||
if (visible || parent.$refs._component || forceRender) {
|
||||
let el = this.componentEl
|
||||
if (!this.container) {
|
||||
this.container = getContainer()
|
||||
el = document.createElement('div')
|
||||
this.componentEl = el
|
||||
this.container.appendChild(el)
|
||||
}
|
||||
|
||||
if (!this._component) {
|
||||
this._component = new Vue({
|
||||
data: {
|
||||
comProps: props,
|
||||
},
|
||||
parent: self.parent,
|
||||
el: self.container,
|
||||
el: el,
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
if (ready) {
|
||||
|
|
@ -60,9 +67,11 @@ export default {
|
|||
})
|
||||
},
|
||||
render () {
|
||||
return getComponent(props)
|
||||
return getComponent(this.comProps)
|
||||
},
|
||||
})
|
||||
} else {
|
||||
this._component.comProps = props
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -127,7 +127,11 @@ export function getStyle (ele) {
|
|||
} else if (ele.$vnode && ele.$vnode.data) {
|
||||
data = ele.$vnode.data
|
||||
}
|
||||
return data.style || parseStyleText(data.staticStyle || '')
|
||||
let style = data.style || data.staticStyle
|
||||
if (typeof style === 'string') {
|
||||
style = parseStyleText(style)
|
||||
}
|
||||
return style
|
||||
}
|
||||
|
||||
export function getComponentName (opts) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -88,23 +88,10 @@ export { default as Affix } from './affix'
|
|||
export { default as Cascader } from './cascader'
|
||||
export { default as BackTop } from './back-top'
|
||||
export { default as Modal } from './modal'
|
||||
import {
|
||||
info,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
warn,
|
||||
confirm,
|
||||
} from './modal'
|
||||
export { default as Alert } from './alert'
|
||||
|
||||
const api = {
|
||||
notification,
|
||||
message,
|
||||
modalInfo: info,
|
||||
modalSuccess: success,
|
||||
modalError: error,
|
||||
modalWarning: warning,
|
||||
modalWarn: warn,
|
||||
modalConfirm: confirm,
|
||||
}
|
||||
export { api }
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@ export default {
|
|||
visible: false,
|
||||
okType: 'primary',
|
||||
}),
|
||||
model: {
|
||||
prop: 'visible',
|
||||
event: 'change',
|
||||
},
|
||||
// static info: ModalFunc;
|
||||
// static success: ModalFunc;
|
||||
// static error: ModalFunc;
|
||||
|
|
@ -72,6 +76,7 @@ export default {
|
|||
methods: {
|
||||
handleCancel (e) {
|
||||
this.$emit('cancel', e)
|
||||
this.$emit('change', false)
|
||||
},
|
||||
|
||||
handleOk (e) {
|
||||
|
|
@ -131,7 +136,7 @@ export default {
|
|||
props: {
|
||||
...this.$props,
|
||||
title,
|
||||
footer: typeof footer === undefined ? defaultFooter : footer,
|
||||
footer: footer === undefined ? defaultFooter : footer,
|
||||
visible: visible,
|
||||
mousePosition,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@ import Vue from 'vue'
|
|||
import ConfirmDialog from './ConfirmDialog'
|
||||
export default function confirm (config) {
|
||||
const div = document.createElement('div')
|
||||
const el = document.createElement('div')
|
||||
div.appendChild(el)
|
||||
document.body.appendChild(div)
|
||||
|
||||
let confirmDialogInstance = null
|
||||
function close (...args) {
|
||||
destroy(...args)
|
||||
|
|
@ -23,7 +26,7 @@ export default function confirm (config) {
|
|||
|
||||
function render (props) {
|
||||
return new Vue({
|
||||
el: div,
|
||||
el: el,
|
||||
render () {
|
||||
return <ConfirmDialog {...props} />
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
|
||||
|
|
@ -15,9 +15,8 @@ Basic modal.
|
|||
<a-button type="primary" @click="showModal">Open</a-button>
|
||||
<a-modal
|
||||
title="Basic Modal"
|
||||
:visible="visible"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
|
|
@ -40,10 +39,6 @@ export default {
|
|||
console.log(e);
|
||||
this.visible = false
|
||||
},
|
||||
handleCancel(e) {
|
||||
console.log(e);
|
||||
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>
|
||||
```
|
||||
|
||||
|
|
@ -21,10 +21,12 @@ To use `confirm()` to popup a confirmation modal dialog.
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Modal } from 'antd'
|
||||
const confirm = Modal.confirm
|
||||
export default {
|
||||
methods: {
|
||||
showConfirm() {
|
||||
this.$modalConfirm({
|
||||
confirm({
|
||||
title: 'Do you Want to delete these items?',
|
||||
content: 'Some descriptions',
|
||||
onOk() {
|
||||
|
|
@ -33,11 +35,12 @@ export default {
|
|||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
class: 'test',
|
||||
});
|
||||
},
|
||||
|
||||
showDeleteConfirm() {
|
||||
this.$modalConfirm({
|
||||
confirm({
|
||||
title: 'Are you sure delete this task?',
|
||||
content: 'Some descriptions',
|
||||
okText: 'Yes',
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
```
|
||||
|
|
@ -53,14 +53,11 @@ const confirm = function (props) {
|
|||
}
|
||||
return modalConfirm(config)
|
||||
}
|
||||
|
||||
export {
|
||||
info,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
warn,
|
||||
confirm,
|
||||
}
|
||||
Modal.info = info
|
||||
Modal.success = success
|
||||
Modal.error = error
|
||||
Modal.warning = warning
|
||||
Modal.warn = warn
|
||||
Modal.confirm = confirm
|
||||
|
||||
export default Modal
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
```
|
||||
|
|
@ -28,3 +28,4 @@ import './affix/style'
|
|||
import './cascader/style'
|
||||
import './back-top/style'
|
||||
import './modal/style'
|
||||
import './alert/style'
|
||||
|
|
|
|||
|
|
@ -20,9 +20,10 @@ const DialogWrap = {
|
|||
if (this.visible) {
|
||||
this.renderComponent({
|
||||
afterClose: this.removeContainer,
|
||||
onClose () {
|
||||
},
|
||||
visible: false,
|
||||
on: {
|
||||
close () {},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
this.removeContainer()
|
||||
|
|
@ -31,18 +32,21 @@ const DialogWrap = {
|
|||
methods: {
|
||||
getComponent (extra = {}) {
|
||||
const { $attrs, $listeners, $props, $slots } = this
|
||||
|
||||
const { on, ...otherProps } = extra
|
||||
const dialogProps = {
|
||||
props: {
|
||||
...$props,
|
||||
dialogClass: getClass(this),
|
||||
dialogStyle: getStyle(this),
|
||||
...extra,
|
||||
...otherProps,
|
||||
},
|
||||
attrs: $attrs,
|
||||
ref: '_component',
|
||||
key: 'dialog',
|
||||
on: $listeners,
|
||||
on: {
|
||||
...$listeners,
|
||||
...on,
|
||||
},
|
||||
}
|
||||
return (
|
||||
<Dialog {...dialogProps}>{$slots.default}</Dialog>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ AutoComplete | done
|
|||
Affix | done
|
||||
Cascader | done
|
||||
BackTop | done
|
||||
Modal
|
||||
Modal | done
|
||||
Alert
|
||||
Calendar
|
||||
DatePicker
|
||||
|
|
|
|||
|
|
@ -28,3 +28,5 @@ export { default as autoComplete } from 'antd/auto-complete/demo/index.vue'
|
|||
export { default as affix } from 'antd/affix/demo/index.vue'
|
||||
export { default as cascader } from 'antd/cascader/demo/index.vue'
|
||||
export { default as backTop } from 'antd/back-top/demo/index.vue'
|
||||
export { default as modal } from 'antd/modal/demo/index.vue'
|
||||
export { default as alert } from 'antd/alert/demo/index.vue'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
|||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/vc-steps/demo/${d}`),
|
||||
component: import(`../components/alert/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue