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

build/bin/build-entry.js

@@ -9,7 +9,6 @@ function buildVantEntry() {
   const uninstallComponents = [
     'Lazyload',
     'Waterfall',
-    'Dialog',
     'Toast',
     'ImagePreview',
     'Locale'

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'
   }
 });

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;
   }
 }

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'

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 | 点击尾部图标时触发 | - |
 

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 (Vue.extend(VanDialog))({
-  instance = new DialogConstructor({
     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 = {}) => {
+Dialog.setDefaultOptions = options => {
-  currentDefaultOptions = {
+  Object.assign(Dialog.currentOptions, options);
-    ...currentDefaultOptions,
-    ...options
-  };
 };
 
 Dialog.resetDefaultOptions = () => {
-  currentDefaultOptions = {
+  Dialog.currentOptions = { ...Dialog.defaultOptions };
-    ...defaultOptions
+};
-  };
+
+Dialog.install = () => {
+  Vue.component(VanDialog.name, VanDialog);
 };
 
 Vue.prototype.$dialog = Dialog;
+Dialog.resetDefaultOptions();
 
 export default Dialog;
-export {
-  DialogComponent as Dialog
-};

packages/index.js

@@ -84,6 +84,7 @@ const components = [
   CouponCell,
   CouponList,
   DatetimePicker,
+  Dialog,
   Field,
   GoodsAction,
   GoodsActionBigBtn,

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;

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;
+  });
 });