feat(dialog): add new prop theme (#3476)

example/pages/dialog/index.js

@@ -12,6 +12,25 @@ Page({
     this.setData({ show: true });
   },
 
+  getUserInfo(event) {
+    console.log(event.detail);
+  },
+
+  onClickThemeAlert() {
+    Dialog.alert({
+      title: '标题',
+      theme: 'round-button',
+      message
+    });
+  },
+
+  onClickThemeAlert2() {
+    Dialog.alert({
+      theme: 'round-button',
+      message
+    });
+  },
+
   onClickAlert() {
     Dialog.alert({
       title: '标题',
@@ -19,10 +38,6 @@ Page({
     });
   },
 
-  getUserInfo(event) {
-    console.log(event.detail);
-  },
-
   onClickAlert2() {
     Dialog.alert({
       message
@@ -52,7 +67,7 @@ Page({
       });
   },
 
-  onClose(event) {
+  onClose() {
     this.setData({
       show: false
     });

example/pages/dialog/index.wxml

@@ -7,6 +7,15 @@
   </van-button>
 </demo-block>
 
+<demo-block title="圆角样式" padding>
+  <van-button type="primary" class="demo-margin-right" bind:click="onClickThemeAlert">
+    提示弹窗
+  </van-button>
+  <van-button type="primary" bind:click="onClickThemeAlert2">
+    提示弹窗（无标题）
+  </van-button>
+</demo-block>
+
 <demo-block title="确认弹窗" padding>
   <van-button type="primary" bind:click="onClickConfirm">
     确认弹窗

packages/dialog/README.md

@@ -43,6 +43,33 @@ Dialog.alert({
 });
 ```
 
+### 圆角样式
+
+样式为圆角风格。
+
+```html
+<van-dialog id="van-dialog" />
+```
+
+```javascript
+import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
+
+Dialog.alert({
+  title: '标题',
+  message: '弹窗内容',
+  theme: 'round-button',
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: '弹窗内容',
+  theme: 'round-button',
+}).then(() => {
+  // on close
+});
+```
+
 ### 消息确认
 
 用于确认消息，包含取消和确认按钮
@@ -137,6 +164,7 @@ Page({
 | title | 标题 | _string_ | - | - |
 | width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 |
 | message | 文本内容，支持通过`\n`换行 | _string_ | - | 1.0.0 |
+| theme | 样式风格，可选值为`round-button` | _string_ | `default` |
 | messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | - |
 | zIndex | z-index 层级 | _number_ | `100` | - |
 | className | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | - |
@@ -179,6 +207,7 @@ Page({
 | title | 标题 | _string_ | - |
 | width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 |
 | message | 文本内容，支持通过`\n`换行 | _string_ | - |
+| theme | 样式风格，可选值为`round-button` | _string_ | `default` |
 | message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
 | z-index | z-index 层级 | _number_ | `100` |
 | class-name | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' |

packages/dialog/dialog.ts

@@ -7,6 +7,7 @@ type DialogOptions = {
   title?: string;
   width?: string | number;
   zIndex?: number;
+  theme?: string;
   context?:
     | WechatMiniprogram.Page.TrivialInstance
     | WechatMiniprogram.Component.TrivialInstance;
@@ -53,10 +54,10 @@ function getContext() {
   return pages[pages.length - 1];
 }
 
-const Dialog: Dialog = (options) => {
+const Dialog: Dialog = options => {
   options = {
     ...Dialog.currentOptions,
-    ...options,
+    ...options
   };
 
   return new Promise((resolve, reject) => {
@@ -70,7 +71,7 @@ const Dialog: Dialog = (options) => {
       dialog.setData({
         onCancel: reject,
         onConfirm: resolve,
-        ...options,
+        ...options
       });
 
       wx.nextTick(() => {
@@ -90,6 +91,7 @@ Dialog.defaultOptions = {
   show: false,
   title: '',
   width: null,
+  theme: 'default',
   message: '',
   zIndex: 100,
   overlay: true,
@@ -105,31 +107,31 @@ Dialog.defaultOptions = {
   showConfirmButton: true,
   showCancelButton: false,
   closeOnClickOverlay: false,
-  confirmButtonOpenType: '',
+  confirmButtonOpenType: ''
 };
 
 Dialog.alert = Dialog;
 
-Dialog.confirm = (options) =>
+Dialog.confirm = options =>
   Dialog({
     showCancelButton: true,
-    ...options,
+    ...options
   });
 
 Dialog.close = () => {
-  queue.forEach((dialog) => {
+  queue.forEach(dialog => {
     dialog.close();
   });
   queue = [];
 };
 
 Dialog.stopLoading = () => {
-  queue.forEach((dialog) => {
+  queue.forEach(dialog => {
     dialog.stopLoading();
   });
 };
 
-Dialog.setDefaultOptions = (options) => {
+Dialog.setDefaultOptions = options => {
   Object.assign(Dialog.currentOptions, options);
 };
 

packages/dialog/index.json

@@ -2,6 +2,8 @@
   "component": true,
   "usingComponents": {
     "van-popup": "../popup/index",
-    "van-button": "../button/index"
+    "van-button": "../button/index",
+    "van-goods-action": "../goods-action//index",
+    "van-goods-action-button": "../goods-action-button/index"
   }
 }

packages/dialog/index.less

@@ -53,6 +53,11 @@
 
   &__footer {
     display: flex;
+
+    &--round {
+      position: relative !important;
+      padding: 0 @padding-lg - 5px @padding-md !important;
+    }
   }
 
   &__button {

packages/dialog/index.ts

@@ -1,7 +1,7 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
-import { GRAY, BLUE } from '../common/color';
+import { GRAY, RED } from '../common/color';
 
 type Action = 'confirm' | 'cancel' | 'overlay';
 
@@ -13,10 +13,14 @@ VantComponent({
       type: Boolean,
       observer(show: boolean) {
         !show && this.stopLoading();
-      },
+      }
     },
     title: String,
     message: String,
+    theme: {
+      type: String,
+      value: 'default'
+    },
     useSlot: Boolean,
     className: String,
     customStyle: String,
@@ -30,43 +34,43 @@ VantComponent({
     width: null,
     zIndex: {
       type: Number,
-      value: 2000,
+      value: 2000
     },
     confirmButtonText: {
       type: String,
-      value: '确认',
+      value: '确认'
     },
     cancelButtonText: {
       type: String,
-      value: '取消',
+      value: '取消'
     },
     confirmButtonColor: {
       type: String,
-      value: BLUE,
+      value: RED
     },
     cancelButtonColor: {
       type: String,
-      value: GRAY,
+      value: GRAY
     },
     showConfirmButton: {
       type: Boolean,
-      value: true,
+      value: true
     },
     overlay: {
       type: Boolean,
-      value: true,
+      value: true
     },
     transition: {
       type: String,
-      value: 'scale',
-    },
+      value: 'scale'
+    }
   },
 
   data: {
     loading: {
       confirm: false,
-      cancel: false,
-    },
+      cancel: false
+    }
   },
 
   methods: {
@@ -85,7 +89,7 @@ VantComponent({
     handleAction(action: Action) {
       if (this.data.asyncClose) {
         this.setData({
-          [`loading.${action}`]: true,
+          [`loading.${action}`]: true
         });
       }
 
@@ -94,7 +98,7 @@ VantComponent({
 
     close() {
       this.setData({
-        show: false,
+        show: false
       });
     },
 
@@ -102,8 +106,8 @@ VantComponent({
       this.setData({
         loading: {
           confirm: false,
-          cancel: false,
-        },
+          cancel: false
+        }
       });
     },
 
@@ -122,6 +126,6 @@ VantComponent({
       if (callback) {
         callback(this);
       }
-    },
-  },
+    }
+  }
 });

packages/dialog/index.wxml

@@ -27,7 +27,49 @@
     <text class="van-dialog__message-text">{{ message }}</text>
   </view>
 
-  <view class="van-hairline--top van-dialog__footer">
+  <van-goods-action wx:if="{{ theme === 'round-button' }}" custom-class="van-dialog__footer--round">
+    <van-goods-action-button
+      wx:if="{{ showCancelButton }}"
+      size="large"
+      loading="{{ loading.cancel }}"
+      class="van-dialog__button van-hairline--right"
+      custom-class="van-dialog__cancel"
+      custom-style="color: {{ cancelButtonColor }}"
+      bind:click="onCancel"
+    >
+      {{ cancelButtonText }}
+    </van-goods-action-button>
+    <van-goods-action-button
+      wx:if="{{ showConfirmButton }}"
+      size="large"
+      class="van-dialog__button"
+      loading="{{ loading.confirm }}"
+      custom-class="van-dialog__confirm"
+      custom-style="color: {{ confirmButtonColor }}"
+
+      open-type="{{ confirmButtonOpenType }}"
+      lang="{{ lang }}"
+      business-id="{{ businessId }}"
+      session-from="{{ sessionFrom }}"
+      send-message-title="{{ sendMessageTitle }}"
+      send-message-path="{{ sendMessagePath }}"
+      send-message-img="{{ sendMessageImg }}"
+      show-message-card="{{ showMessageCard }}"
+      app-parameter="{{ appParameter }}"
+
+      bind:click="onConfirm"
+      bindgetuserinfo="bindGetUserInfo"
+      bindcontact="bindContact"
+      bindgetphonenumber="bindGetPhoneNumber"
+      binderror="bindError"
+      bindlaunchapp="bindLaunchApp"
+      bindopensetting="bindOpenSetting"
+    >
+      {{ confirmButtonText }}
+    </van-goods-action-button>
+  </van-goods-action>
+
+  <view wx:else class="van-hairline--top van-dialog__footer">
     <van-button
       wx:if="{{ showCancelButton }}"
       size="large"