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

2025-04-06 03:57:59 +08:00 · 2018-01-31 11:22:00 +08:00 · 2018-01-31 11:22:00 +08:00 · aa4f03a15d
commit aa4f03a15d
parent 9df66da212
11 changed files with 211 additions and 53 deletions
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@ -9,7 +9,6 @@ function buildVantEntry() {
  const uninstallComponents = [
    'Lazyload',
    'Waterfall',
-    'Dialog',
    'Toast',
    'ImagePreview',
    'Locale'
--- a/docs/demos/common.js
+++ b/docs/demos/common.js
@ -45,11 +45,15 @@ Locale.add({
    search: '搜索',
    content: '内容',
    custom: '自定义',
+    username: '用户名',
+    password: '密码',
    loading: '加载状态',
    disabled: '禁用状态',
    uneditable: '不可编辑',
    basicUsage: '基础用法',
-    advancedUsage: '高级用法'
+    advancedUsage: '高级用法',
+    usernamePlaceholder: '请输入用户名',
+    passwordPlaceholder: '请输入密码'
  },
  'en-US': {
    red: 'Red',
@ -66,10 +70,14 @@ Locale.add({
    search: 'Search',
    content: 'Content',
    custom: 'Custom',
+    username: 'Username',
+    password: 'Password',
    loading: 'Loading',
    disabled: 'Disabled',
    uneditable: 'Uneditable',
    basicUsage: 'Basic Usage',
-    advancedUsage: 'Advanced Usage'
+    advancedUsage: 'Advanced Usage',
+    usernamePlaceholder: 'Username',
+    passwordPlaceholder: 'Password'
  }
 });
--- a/docs/demos/views/dialog.vue
+++ b/docs/demos/views/dialog.vue
@ -8,6 +8,26 @@
    <demo-block :title="$t('title2')">
      <van-button @click="onClickConfirm">Confirm</van-button>
    </demo-block>
+
+    <demo-block :title="$t('advancedUsage')">
+      <van-button @click="show = true">{{ $t('advancedUsage') }}</van-button>
+      <van-dialog
+        v-model="show"
+        @confirm="show = false"
+      >
+        <van-field
+          v-model="username"
+          :label="$t('username')"
+          :placeholder="$t('usernamePlaceholder')"
+        />
+        <van-field
+          v-model="password"
+          type="password"
+          :label="$t('password')"
+          :placeholder="$t('passwordPlaceholder')"
+        />
+      </van-dialog>
+    </demo-block>
  </demo-section>
 </template>

@ -26,6 +46,14 @@ export default {
    }
  },

+  data() {
+    return {
+      show: false,
+      username: '',
+      password: ''
+    };
+  },
+
  methods: {
    onClickAlert() {
      Dialog.alert({
@ -52,7 +80,7 @@ export default {

 <style lang="postcss">
 .demo-dialog {
-  .van-button {
+  .van-doc-demo-block > .van-button {
    margin: 15px;
  }
 }
--- a/docs/demos/views/field.vue
+++ b/docs/demos/views/field.vue
@ -68,13 +68,9 @@ export default {
      title3: '禁用输入框',
      title4: '错误提示',
      title5: '高度自适应',
-      username: '用户名',
-      password: '密码',
      message: '留言',
      phone: '手机号',
      phonePlaceholder: '请输入手机号',
-      usernamePlaceholder: '请输入用户名',
-      passwordPlaceholder: '请输入密码',
      messagePlaceholder: '请输入留言',
      inputDisabled: '输入框已禁用',
      phoneError: '手机号格式错误'
@ -84,13 +80,9 @@ export default {
      title3: 'Disabled',
      title4: 'Error info',
      title5: 'Auto resize',
-      username: 'Username',
-      password: 'Password',
      message: 'Message',
      phone: 'Phone',
      phonePlaceholder: 'Phone',
-      usernamePlaceholder: 'Username',
-      passwordPlaceholder: 'Password',
      messagePlaceholder: 'Message',
      inputDisabled: 'Disabled',
      phoneError: 'Invalid phone'
--- a/docs/markdown/en-US/dialog.md
+++ b/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 | - |
--- a/docs/markdown/zh-CN/dialog.md
+++ b/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 | 点击取消按钮时触发 | - |
--- a/docs/markdown/zh-CN/field.md
+++ b/docs/markdown/zh-CN/field.md
@ -107,7 +107,7 @@ Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 ### Event
 Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等

-| 事件名称 | 说明 | 回调参数 |
+| 事件 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | click-icon | 点击尾部图标时触发 | - |

--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@ -1,31 +1,10 @@
 import Vue from 'vue';
-import DialogComponent from './dialog';
+import VanDialog from './dialog';

 let instance;

-const defaultOptions = {
-  value: true,
-  title: '',
-  message: '',
-  overlay: true,
-  lockOnScroll: true,
-  confirmButtonText: '',
-  cancelButtonText: '',
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnClickOverlay: false,
-  callback: action => {
-    instance[action === 'confirm' ? 'resolve' : 'reject'](action);
-  }
-};
-
-let currentDefaultOptions = {
-  ...defaultOptions
-};
-
 const initInstance = () => {
-  const DialogConstructor = Vue.extend(DialogComponent);
-  instance = new DialogConstructor({
+  instance = new (Vue.extend(VanDialog))({
    el: document.createElement('div')
  });

@ -50,13 +29,29 @@ const Dialog = options => {
  });
 };

+Dialog.defaultOptions = {
+  value: true,
+  title: '',
+  message: '',
+  overlay: true,
+  lockOnScroll: true,
+  confirmButtonText: '',
+  cancelButtonText: '',
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnClickOverlay: false,
+  callback: action => {
+    instance[action === 'confirm' ? 'resolve' : 'reject'](action);
+  }
+};
+
 Dialog.alert = options => Dialog({
-  ...currentDefaultOptions,
+  ...Dialog.currentOptions,
  ...options
 });

 Dialog.confirm = options => Dialog({
-  ...currentDefaultOptions,
+  ...Dialog.currentOptions,
  showCancelButton: true,
  ...options
 });
@ -65,22 +60,19 @@ Dialog.close = () => {
  instance.value = false;
 };

-Dialog.setDefaultOptions = (options = {}) => {
-  currentDefaultOptions = {
-    ...currentDefaultOptions,
-    ...options
-  };
+Dialog.setDefaultOptions = options => {
+  Object.assign(Dialog.currentOptions, options);
 };

 Dialog.resetDefaultOptions = () => {
-  currentDefaultOptions = {
-    ...defaultOptions
-  };
+  Dialog.currentOptions = { ...Dialog.defaultOptions };
+};
+
+Dialog.install = () => {
+  Vue.component(VanDialog.name, VanDialog);
 };

 Vue.prototype.$dialog = Dialog;
+Dialog.resetDefaultOptions();

 export default Dialog;
-export {
-  DialogComponent as Dialog
-};
--- a/packages/index.js
+++ b/packages/index.js
@ -84,6 +84,7 @@ const components = [
  CouponCell,
  CouponList,
  DatetimePicker,
+  Dialog,
  Field,
  GoodsAction,
  GoodsActionBigBtn,
--- a/packages/vant-css/src/dialog.css
+++ b/packages/vant-css/src/dialog.css
@ -18,8 +18,6 @@
  }

  &__content {
-    padding: 15px 20px;
-
    &::after {
      border-bottom-width: 1px;
    }
@ -27,6 +25,7 @@

  &__message {
    line-height: 1.5;
+    padding: 15px 20px;

    &--withtitle {
      color: $gray-dark;
--- a/test/unit/specs/dialog.spec.js
+++ b/test/unit/specs/dialog.spec.js
@ -1,3 +1,4 @@
+import Vue from 'vue';
 import Dialog from 'packages/dialog';

 describe('Dialog', () => {
@ -49,4 +50,18 @@ describe('Dialog', () => {
      document.querySelector('.van-dialog__cancel').click();
    }, 500);
  });
+
+  it('set default options', () => {
+    Dialog.setDefaultOptions({
+      title: 'default title'
+    });
+    expect(Dialog.currentOptions.title).to.equal('default title');
+    Dialog.resetDefaultOptions();
+    expect(Dialog.currentOptions.title).to.equal('');
+  });
+
+  it('register dialog component', () => {
+    Vue.use(Dialog);
+    expect(!!Vue.component('van-dialog')).to.be.true;
+  });
 });