[new feature] Dialog: support component call (#593)

docs/markdown/en-US/dialog.md

@@ -77,3 +77,64 @@ export default {
 | overlay | Whether to show overlay | `Boolean` | `true` | - |
 | closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
 | lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
+
+#### Advanced Usage
+If you need to render vue components within a dialog, you can use dialog component.
+
+```html
+<van-dialog v-model="show" @confirm="onConfirm">
+  <van-field
+    v-model="username"
+    label="Username"
+    placeholder="Username"
+  />
+  <van-field
+    v-model="password"
+    type="password"
+    :label="Password"
+    :placeholder="Password"
+  />
+</van-dialog>
+```
+
+```js
+Vue.use(Dialog);
+
+export default {
+  data() {
+    return {
+      show: false,
+      username: '',
+      password: ''
+    };
+  },
+  
+  methods: {
+    onConfirm() {
+      this.show = false;
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Whether to show dialog | `Boolean` | - | - |
+| title | Title | `String` | - | - |
+| message | Message | `String` | - | - |
+| show-confirm-button | Whether to show confirm button | `Boolean` |  `true` | - |
+| show-cancel-button | Whether to show cancel button | `Boolean` |  `false` | - |
+| confirm-button-text | Confirm button text | `String` |  `Confirm` | - |
+| cancel-button-text | Cancel button test | `String` | `Cancel` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` | - |
+| lock-on-scroll | Whether to lock body scroll | `Boolean` | `true` | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| confirm | Triggered when click confirm button | - |
+| cancel | Triggered when click cancel button | - |

docs/markdown/zh-CN/dialog.md

@@ -1,4 +1,5 @@
 ## Dialog 弹出框
+Dialog 组件支持函数调用和组件调用两种形式
 
 ### 使用指南
 
@@ -40,8 +41,8 @@ Dialog.confirm({
 });
 ```
 
-#### 组件内调用
-引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，便于在组件内调用。
+#### 全局方法
+引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法
 
 ```js
 export default {
@@ -77,3 +78,65 @@ export default {
 | overlay | 是否展示蒙层 | `Boolean` | `true` | - |
 | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
 | lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
+
+
+#### 高级用法
+如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog
+
+```html
+<van-dialog v-model="show" @confirm="onConfirm">
+  <van-field
+    v-model="username"
+    label="用户名"
+    placeholder="请输入用户名"
+  />
+  <van-field
+    v-model="password"
+    type="password"
+    :label="密码"
+    :placeholder="请输入密码"
+  />
+</van-dialog>
+```
+
+```js
+Vue.use(Dialog);
+
+export default {
+  data() {
+    return {
+      show: false,
+      username: '',
+      password: ''
+    };
+  },
+  
+  methods: {
+    onConfirm() {
+      this.show = false;
+    }
+  }
+}
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否显示弹窗 | `Boolean` | - | - |
+| title | 标题 | `String` | - | - |
+| message | 内容 | `String` | - | - |
+| show-confirm-button | 是否展示确认按钮 | `Boolean` |  `true` | - |
+| show-cancel-button | 是否展示取消按钮 | `Boolean` |  `false` | - |
+| confirm-button-text | 确认按钮的文案 | `String` |  `确认` | - |
+| cancel-button-text | 取消按钮的文案 | `String` | `取消` | - |
+| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
+| close-on-click-overlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
+| lock-on-scroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
+
+### Event
+
+| 事件 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| confirm | 点击确认按钮时触发 | - |
+| cancel | 点击取消按钮时触发 | - |

docs/markdown/zh-CN/field.md

@@ -107,7 +107,7 @@ Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 ### Event
 Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
 
-| 事件名称 | 说明 | 回调参数 |
+| 事件 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | click-icon | 点击尾部图标时触发 | - |