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