feat(Dialog): 增加 title 插槽、confirm-button-color 、cancel-button-color 属性 (#2034)

example/pages/dialog/index.wxml

@@ -40,6 +40,7 @@
   <van-button
     plain
     type="danger"
+    class="demo-margin-right"
     bind:click="showCustomDialog"
   >
     组件调用

packages/button/README.md

@@ -118,6 +118,7 @@
 | loading-text | 加载状态提示文字 | *string* | - | - |
 | loading-type | 加载状态图标类型，可选值为 `spinner` | *string* | `circular` | - |
 | loading-size | 加载图标大小 | *string* | `20px` | - |
+| custom-style | 自定义样式 | *string* | - | - |
 | open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | - |
 | app-parameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | - |
 | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | - | - |

packages/button/index.ts

@@ -21,6 +21,7 @@ VantComponent({
     hairline: Boolean,
     disabled: Boolean,
     loadingText: String,
+    customStyle: String,
     loadingType: {
       type: String,
       value: 'circular'

packages/button/index.wxml

@@ -5,7 +5,7 @@
   class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"
-  style="{{ style }}"
+  style="{{ style }} {{ customStyle }}"
   open-type="{{ openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"

packages/common/color.ts

@@ -3,3 +3,4 @@ export const BLUE = '#1989fa';
 export const WHITE = '#fff';
 export const GREEN = '#07c160';
 export const ORANGE = '#ff976a';
+export const GRAY = '#323233';

packages/dialog/README.md

@@ -182,9 +182,12 @@ Page({
 | show-cancel-button | 是否展示取消按钮 | *boolean* |  `false` |
 | confirm-button-text | 确认按钮的文案 | *string* |  `确认` |
 | cancel-button-text | 取消按钮的文案 | *string* | `取消` |
+| confirm-button-color | 确认按钮的字体颜色 | *string* |  `#1989fa` |
+| cancel-button-color | 取消按钮的字体颜色 | *string* | `#333` |
 | overlay | 是否展示蒙层 | *boolean* | `true` |
 | close-on-click-overlay | 点击蒙层时是否关闭弹窗 | *boolean* | `false` |
 | use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` |
+| use-title-slot | 是否使用自定义标题的插槽 | *boolean* | `false` |
 | async-close | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` |
 | transition | 动画名称，可选值为`fade` | *string* | `scale` |
 | confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - |
@@ -216,3 +219,9 @@ Page({
 | bind:getphonenumber | 获取用户手机号回调 | - |
 | bind:error | 当使用开放能力时，发生错误的回调 | - |
 | bind:opensetting | 在打开授权设置页后回调 | - |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |

packages/dialog/index.less

@@ -56,10 +56,6 @@
     border: 0 !important;
   }
 
-  &__confirm {
-    .theme(color, '@blue') !important;
-  }
-
   &-bounce-enter {
     transform: translate3d(-50%, -50%, 0) scale(0.7);
     opacity: 0;

packages/dialog/index.ts

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
+import { GRAY, BLUE } from '../common/color';
 
 type Action = 'confirm' | 'cancel' | 'overlay';
 
@@ -16,6 +17,7 @@ VantComponent({
     customStyle: String,
     asyncClose: Boolean,
     messageAlign: String,
+    useTitleSlot: Boolean,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,
@@ -31,6 +33,14 @@ VantComponent({
       type: String,
       value: '取消'
     },
+    confirmButtonColor: {
+      type: String,
+      value: BLUE
+    },
+    cancelButtonColor: {
+      type: String,
+      value: GRAY
+    },
     showConfirmButton: {
       type: Boolean,
       value: true

packages/dialog/index.wxml

@@ -9,10 +9,11 @@
   bind:close="onClickOverlay"
 >
   <view
-    wx:if="{{ title }}"
+    wx:if="{{ title || useTitleSlot  }}"
     class="van-dialog__header {{ message || useSlot ? '' : 'van-dialog--isolated' }}"
   >
-    {{ title }}
+    <slot wx:if="{{ useTitleSlot }}" name="title" />
+    <block wx:elif="{{ title }}"> {{ title }}</block>
   </view>
 
   <slot wx:if="{{ useSlot }}" />
@@ -30,6 +31,7 @@
       loading="{{ loading.cancel }}"
       class="van-dialog__button van-hairline--right"
       custom-class="van-dialog__cancel"
+      custom-style="color: {{ cancelButtonColor }}"
       bind:click="onCancel"
     >
       {{ cancelButtonText }}
@@ -40,6 +42,7 @@
       class="van-dialog__button"
       loading="{{ loading.confirm }}"
       custom-class="van-dialog__confirm"
+      custom-style="color: {{ confirmButtonColor }}"
 
       open-type="{{ confirmButtonOpenType }}"
       lang="{{ lang }}"