[Doc] update dialog document (#3068)

2025-04-06 03:57:59 +08:00 · 2019-03-31 17:05:07 +08:00 · 2019-03-31 17:05:07 +08:00 · 93e2dd8ffe
commit 93e2dd8ffe
parent 0af55e0c1f
4 changed files with 144 additions and 136 deletions
--- a/packages/dialog/demo/index.vue
+++ b/packages/dialog/demo/index.vue
@ -27,31 +27,31 @@
      </van-button>
    </demo-block>

-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="$t('asyncClose')">
+      <van-button
+        type="primary"
+        plain
+        @click="onClickAsyncClose"
+      >
+        {{ $t('asyncClose') }}
+      </van-button>
+    </demo-block>
+
+    <demo-block :title="$t('componentCall')">
      <van-button
        type="danger"
        plain
        @click="show = true"
      >
-        {{ $t('advancedUsage') }}
+        {{ $t('componentCall') }}
      </van-button>
      <van-dialog
        v-model="show"
+        :title="$t('title')"
        show-cancel-button
        :lazy-render="false"
-        :before-close="beforeClose"
      >
-        <van-field
-          v-model="username"
-          :label="$t('username')"
-          :placeholder="$t('usernamePlaceholder')"
-        />
-        <van-field
-          v-model="password"
-          type="password"
-          :label="$t('password')"
-          :placeholder="$t('passwordPlaceholder')"
-        />
+        <img :src="image">
      </van-dialog>
    </demo-block>
  </demo-section>
@ -61,23 +61,27 @@
 export default {
  i18n: {
    'zh-CN': {
-      alert1: '消息提示',
-      alert2: '无标题提示',
-      confirm: '消息确认',
-      content: '有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者'
+      alert1: '提示弹窗',
+      alert2: '提示弹窗（无标题）',
+      confirm: '确认弹窗',
+      asyncClose: '异步关闭',
+      componentCall: '组件调用',
+      content: '代码是写出来给人看的，附带能在机器上运行'
    },
    'en-US': {
      alert1: 'Alert',
      alert2: 'Alert without title',
-      confirm: 'Confirm dialog'
+      confirm: 'Confirm dialog',
+      asyncClose: 'Async Close',
+      componentCall: 'Component Call',
    }
  },

  data() {
    return {
      show: false,
-      username: '',
-      password: ''
+      currentRate: 0,
+      image: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg'
    };
  },

@ -102,12 +106,20 @@ export default {
      });
    },

-    beforeClose(action, done) {
-      if (action === 'confirm') {
-        setTimeout(done, 1000);
-      } else {
-        done();
+    onClickAsyncClose() {
+      function beforeClose(action, done) {
+        if (action === 'confirm') {
+          setTimeout(done, 1000);
+        } else {
+          done();
+        }
      }
+
+      this.$dialog.confirm({
+        title: this.$t('title'),
+        message: this.$t('content'),
+        beforeClose
+      });
    }
  }
 };
@ -118,5 +130,11 @@ export default {
  .van-doc-demo-block > .van-button {
    margin-left: 15px;
  }
+
+  img {
+    width: 100%;
+    padding: 25px 20px 0;
+    box-sizing: border-box;
+  }
 }
 </style>
--- a/packages/dialog/en-US.md
+++ b/packages/dialog/en-US.md
@ -44,6 +44,24 @@ Used to confirm some messages, including a confirm button and a cancel button
 });
 ```

+#### Asnyc Close
+
+```js
+function beforeClose(action, done) {
+  if (action === 'confirm') {
+    setTimeout(done, 1000);
+  } else {
+    done();
+  }
+}
+
+Dialog.confirm({
+  title: 'Title',
+  message: 'Content',
+  beforeClose
+});
+```
+
 #### $dialog Method

 After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
@ -58,6 +76,30 @@ export default {
 }
 ```

+#### Advanced Usage
+
+If you need to render vue components within a dialog, you can use dialog component.
+
+```html
+<van-dialog
+  v-model="show"
+  title="Title"
+  show-cancel-button
+>
+  <img src="https://img.yzcdn.cn/1.jpg">
+</van-dialog>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false
+    };
+  }
+}
+```
+
 ### Methods

 | Name | Attribute | Return value | Description |
@ -87,51 +129,6 @@ export default {
 | beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: function) => void | - |
 | getContainer | Return the mount node for Dialog | `String | () => HTMLElement` | `body` |

-
-#### Advanced Usage
-
-If you need to render vue components within a dialog, you can use dialog component.
-
-```html
-<van-dialog v-model="show" :asyncConfirm="onClickConfirmAsync">
-  <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: {
-    beforeClose(action, done) {
-      if (action === 'confirm') {
-        setTimeout(done, 1000);
-      } else {
-        done();
-      }
-    }
-  }
-}
-```
-
 ### API

 | Attribute | Description | Type | Default |
--- a/packages/dialog/test/snapshots/demo.spec.js.snap
+++ b/packages/dialog/test/snapshots/demo.spec.js.snap
@ -3,32 +3,23 @@
 exports[`renders demo correctly 1`] = `
 <div>
  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
-      消息提示
+      提示弹窗
    </span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
-      无标题提示
+      提示弹窗（无标题）
    </span></button></div>
  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
-      消息确认
+      确认弹窗
+    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+      异步关闭
    </span></button></div>
  <div><button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
-      高级用法
+      组件调用
    </span></button>
    <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
-      <div class="van-dialog__content">
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>用户名</span></div>
-          <div class="van-cell__value">
-            <div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control"></div>
-          </div>
-        </div>
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label"><span>密码</span></div>
-          <div class="van-cell__value">
-            <div class="van-field__body"><input type="password" placeholder="请输入密码" value="" class="van-field__control"></div>
-          </div>
-        </div>
-      </div>
-      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">消息确认</span></button></div>
+      <div class="van-dialog__header">标题</div>
+      <div class="van-dialog__content"><img src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"></div>
+      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>
    </div>
  </div>
 </div>
--- a/packages/dialog/zh-CN.md
+++ b/packages/dialog/zh-CN.md
@ -45,6 +45,24 @@ Dialog.confirm({
 });
 ```

+#### 异步关闭
+
+```js
+function beforeClose(action, done) {
+  if (action === 'confirm') {
+    setTimeout(done, 1000);
+  } else {
+    done();
+  }
+}
+
+Dialog.confirm({
+  title: '标题',
+  message: '弹窗内容',
+  beforeClose
+});
+```
+
 #### 全局方法

 引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法
@ -59,6 +77,30 @@ export default {
 }
 ```

+#### 组件调用
+
+如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
+
+```html
+<van-dialog
+  v-model="show"
+  title="标题"
+  show-cancel-button
+>
+  <img src="https://img.yzcdn.cn/1.jpg">
+</van-dialog>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false
+    };
+  }
+}
+```
+
 ### 方法

 | 方法名 | 参数 | 返回值 | 介绍 |
@ -72,6 +114,8 @@ export default {

 ### Options

+通过函数调用 `Dialog` 时，支持传入以下选项：
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | title | 标题 | `String` | - | - |
@ -88,54 +132,10 @@ export default {
 | beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | `(action, done) => void` | - | 1.1.6 |
 | getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.11 |

-
-#### 高级用法
-如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog，调用前需要通过 Vue.use 注册组件
-
-```html
-<van-dialog
-  v-model="show"
-  show-cancel-button
-  :before-close="beforeClose"
->
-  <van-field
-    v-model="username"
-    label="用户名"
-    placeholder="请输入用户名"
-  />
-  <van-field
-    v-model="password"
-    type="password"
-    label="密码"
-    placeholder="请输入密码"
-  />
-</van-dialog>
-```
-
-```js
-export default {
-  data() {
-    return {
-      show: false,
-      username: '',
-      password: ''
-    };
-  },
-  
-  methods: {
-    beforeClose(action, done) {
-      if (action === 'confirm') {
-        setTimeout(done, 1000);
-      } else {
-        done();
-      }
-    }
-  }
-}
-```
-
 ### API

+通过组件调用 `Dialog` 时，支持以下 API：
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | v-model | 是否显示弹窗 | `Boolean` | - | - |
@ -154,6 +154,8 @@ export default {

 ### Event

+通过组件调用 `Dialog` 时，支持以下事件：
+
 | 事件 | 说明 | 回调参数 |
 |------|------|------|
 | confirm | 点击确认按钮时触发 | - |