From 42604fbfd201eef06c1a2e7b63945821228885b6 Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Wed, 7 Mar 2018 21:36:15 +0800
Subject: [PATCH] add modal doc and alert

---
 components/_util/ContainerRender.vue     |  15 +-
 components/_util/props-util.js           |   6 +-
 components/alert/demo/banner.md          |  23 +++
 components/alert/demo/basic.md           |  15 ++
 components/alert/demo/closable.md        |  38 +++++
 components/alert/demo/close-text.md      |  15 ++
 components/alert/demo/description.md     |  39 ++++++
 components/alert/demo/icon.md            |  44 ++++++
 components/alert/demo/index.vue          |  55 ++++++++
 components/alert/demo/style.md           |  20 +++
 components/alert/index.en-US.md          |  18 +++
 components/alert/index.vue               | 133 ++++++++++++++++++
 components/alert/index.zh-CN.md          |  18 +++
 components/alert/style/index.js          |   2 +
 components/alert/style/index.less        | 169 +++++++++++++++++++++++
 components/index.js                      |  15 +-
 components/modal/Modal.vue               |   7 +-
 components/modal/confirm.js              |   5 +-
 components/modal/demo/async.md           |  57 ++++++++
 components/modal/demo/basic.md           |   7 +-
 components/modal/demo/confirm-promise.md |  40 ++++++
 components/modal/demo/confirm.md         |   7 +-
 components/modal/demo/footer.md          |  67 +++++++++
 components/modal/demo/index.vue          |  63 +++++++++
 components/modal/demo/info.md            |  66 +++++++++
 components/modal/demo/locale.md          |  60 ++++++++
 components/modal/demo/manual.md          |  31 +++++
 components/modal/demo/position.md        |  92 ++++++++++++
 components/modal/index.en-US.md          |  69 +++++++++
 components/modal/index.js                |  15 +-
 components/modal/index.zh-CN.md          |  67 +++++++++
 components/style.js                      |   1 +
 components/vc-dialog/DialogWrap.vue      |  14 +-
 contributors.md                          |   2 +-
 examples/demo.js                         |   2 +
 examples/routes.js                       |   2 +-
 36 files changed, 1255 insertions(+), 44 deletions(-)
 create mode 100644 components/alert/demo/banner.md
 create mode 100644 components/alert/demo/basic.md
 create mode 100644 components/alert/demo/closable.md
 create mode 100644 components/alert/demo/close-text.md
 create mode 100644 components/alert/demo/description.md
 create mode 100644 components/alert/demo/icon.md
 create mode 100644 components/alert/demo/index.vue
 create mode 100644 components/alert/demo/style.md
 create mode 100644 components/alert/index.en-US.md
 create mode 100644 components/alert/index.vue
 create mode 100644 components/alert/index.zh-CN.md
 create mode 100644 components/alert/style/index.js
 create mode 100644 components/alert/style/index.less
 create mode 100644 components/modal/demo/async.md
 create mode 100644 components/modal/demo/confirm-promise.md
 create mode 100644 components/modal/demo/footer.md
 create mode 100644 components/modal/demo/index.vue
 create mode 100644 components/modal/demo/info.md
 create mode 100644 components/modal/demo/locale.md
 create mode 100644 components/modal/demo/manual.md
 create mode 100644 components/modal/demo/position.md
 create mode 100644 components/modal/index.en-US.md
 create mode 100644 components/modal/index.zh-CN.md

diff --git a/components/_util/ContainerRender.vue b/components/_util/ContainerRender.vue
index d949112bc..19c0db2be 100644
--- a/components/_util/ContainerRender.vue
+++ b/components/_util/ContainerRender.vue
@@ -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
         }
       }
     },
diff --git a/components/_util/props-util.js b/components/_util/props-util.js
index ea74b6b4f..d4434250a 100644
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@@ -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) {
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
new file mode 100644
index 000000000..da0d10833
--- /dev/null
+++ b/components/alert/demo/banner.md
@@ -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>
+```
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
new file mode 100644
index 000000000..d3e81b4cf
--- /dev/null
+++ b/components/alert/demo/basic.md
@@ -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>
+```
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
new file mode 100644
index 000000000..d42ca2859
--- /dev/null
+++ b/components/alert/demo/closable.md
@@ -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>
+```
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
new file mode 100644
index 000000000..06516026e
--- /dev/null
+++ b/components/alert/demo/close-text.md
@@ -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>
+```
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
new file mode 100644
index 000000000..8da625522
--- /dev/null
+++ b/components/alert/demo/description.md
@@ -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>
+```
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
new file mode 100644
index 000000000..68f32c6e7
--- /dev/null
+++ b/components/alert/demo/icon.md
@@ -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>
+```
diff --git a/components/alert/demo/index.vue b/components/alert/demo/index.vue
new file mode 100644
index 000000000..038f85940
--- /dev/null
+++ b/components/alert/demo/index.vue
@@ -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>
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
new file mode 100644
index 000000000..47a111bf3
--- /dev/null
+++ b/components/alert/demo/style.md
@@ -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>
+```
diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
new file mode 100644
index 000000000..cbc01cf36
--- /dev/null
+++ b/components/alert/index.en-US.md
@@ -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 |
diff --git a/components/alert/index.vue b/components/alert/index.vue
new file mode 100644
index 000000000..613a1fe63
--- /dev/null
+++ b/components/alert/index.vue
@@ -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>
diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
new file mode 100644
index 000000000..649e9b922
--- /dev/null
+++ b/components/alert/index.zh-CN.md
@@ -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 |
diff --git a/components/alert/style/index.js b/components/alert/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/alert/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
new file mode 100644
index 000000000..dfcf65789
--- /dev/null
+++ b/components/alert/style/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);
+  }
+}
diff --git a/components/index.js b/components/index.js
index 04b0ca7b7..972f9bdc8 100644
--- a/components/index.js
+++ b/components/index.js
@@ -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 }
diff --git a/components/modal/Modal.vue b/components/modal/Modal.vue
index 81ff819d2..99893ae9d 100644
--- a/components/modal/Modal.vue
+++ b/components/modal/Modal.vue
@@ -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,
       },
diff --git a/components/modal/confirm.js b/components/modal/confirm.js
index 23365b493..a4781d986 100644
--- a/components/modal/confirm.js
+++ b/components/modal/confirm.js
@@ -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} />
       },
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
new file mode 100644
index 000000000..b35ef6e5b
--- /dev/null
+++ b/components/modal/demo/async.md
@@ -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>
+```
+
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index f955e32db..e041be603 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -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>
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
new file mode 100644
index 000000000..24106f6b5
--- /dev/null
+++ b/components/modal/demo/confirm-promise.md
@@ -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>
+```
+
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index b5db87850..839f3f4bc 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -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',
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
new file mode 100644
index 000000000..c4d5b697b
--- /dev/null
+++ b/components/modal/demo/footer.md
@@ -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>
+```
+
diff --git a/components/modal/demo/index.vue b/components/modal/demo/index.vue
new file mode 100644
index 000000000..5dafd70f2
--- /dev/null
+++ b/components/modal/demo/index.vue
@@ -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>
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
new file mode 100644
index 000000000..bcfba8058
--- /dev/null
+++ b/components/modal/demo/info.md
@@ -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>
+```
+
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
new file mode 100644
index 000000000..ba3d40512
--- /dev/null
+++ b/components/modal/demo/locale.md
@@ -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>
+```
+
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
new file mode 100644
index 000000000..e8b2f3d2d
--- /dev/null
+++ b/components/modal/demo/manual.md
@@ -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>
+```
+
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
new file mode 100644
index 000000000..1d868906b
--- /dev/null
+++ b/components/modal/demo/position.md
@@ -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>
+```
+
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
new file mode 100644
index 000000000..92323c5cf
--- /dev/null
+++ b/components/modal/index.en-US.md
@@ -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();
+```
diff --git a/components/modal/index.js b/components/modal/index.js
index 032891f54..759838756 100644
--- a/components/modal/index.js
+++ b/components/modal/index.js
@@ -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
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
new file mode 100644
index 000000000..cb68f3e33
--- /dev/null
+++ b/components/modal/index.zh-CN.md
@@ -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();
+```
diff --git a/components/style.js b/components/style.js
index 82f50e0d0..37fe86642 100644
--- a/components/style.js
+++ b/components/style.js
@@ -28,3 +28,4 @@ import './affix/style'
 import './cascader/style'
 import './back-top/style'
 import './modal/style'
+import './alert/style'
diff --git a/components/vc-dialog/DialogWrap.vue b/components/vc-dialog/DialogWrap.vue
index 567b42e55..c917a1230 100644
--- a/components/vc-dialog/DialogWrap.vue
+++ b/components/vc-dialog/DialogWrap.vue
@@ -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>
diff --git a/contributors.md b/contributors.md
index f4b7946a3..cead70e6b 100644
--- a/contributors.md
+++ b/contributors.md
@@ -22,7 +22,7 @@ AutoComplete | done
 Affix | done
 Cascader | done
 BackTop | done
-Modal
+Modal | done
 Alert
 Calendar
 DatePicker
diff --git a/examples/demo.js b/examples/demo.js
index c0e556563..7f1d4667d 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -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'
diff --git a/examples/routes.js b/examples/routes.js
index ed8f5d208..54f627721 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -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 [