From 63f1672e1fd07b0549a879af7d74487131f25945 Mon Sep 17 00:00:00 2001 From: johnsonwong666 <1067100250@qq.com> Date: Mon, 26 Feb 2024 15:47:57 +0800 Subject: [PATCH 1/2] fix(Dialog): fix button color with different theme --- packages/dialog/dialog.ts | 2 ++ packages/dialog/index.ts | 19 ++++++++++++++++--- packages/dialog/index.wxml | 8 ++++---- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/dialog/dialog.ts b/packages/dialog/dialog.ts index e205f46b0..81a29b6f2 100644 --- a/packages/dialog/dialog.ts +++ b/packages/dialog/dialog.ts @@ -43,6 +43,8 @@ interface DialogOptions { showCancelButton?: boolean; closeOnClickOverlay?: boolean; confirmButtonOpenType?: string; + confirmButtonColor?: string; + cancelButtonColor?: string; } const defaultOptions: DialogOptions = { diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts index 5ec1628ec..8c7025609 100644 --- a/packages/dialog/index.ts +++ b/packages/dialog/index.ts @@ -1,6 +1,6 @@ import { VantComponent } from '../common/component'; import { button } from '../mixins/button'; -import { GRAY, RED } from '../common/color'; +import { GRAY, RED, WHITE } from '../common/color'; import { toPromise } from '../common/utils'; import type { Action } from './dialog'; @@ -13,6 +13,7 @@ VantComponent({ type: Boolean, observer(show: boolean) { !show && this.stopLoading(); + this.handleButtonColor(); }, }, title: String, @@ -50,11 +51,11 @@ VantComponent({ }, confirmButtonColor: { type: String, - value: RED, + value: '', }, cancelButtonColor: { type: String, - value: GRAY, + value: '', }, showConfirmButton: { type: Boolean, @@ -79,6 +80,8 @@ VantComponent({ confirm: false, cancel: false, }, + innerConfirmButtonColor: '', + innerCancelButtonColor: '', callback: (() => {}) as unknown as ( action: string, context: WechatMiniprogram.Component.TrivialInstance @@ -143,5 +146,15 @@ VantComponent({ }); } }, + + handleButtonColor() { + const { confirmButtonColor, cancelButtonColor, theme } = this.data; + this.setData({ + innerConfirmButtonColor: + confirmButtonColor || (theme === 'default' ? RED : WHITE), + innerCancelButtonColor: + cancelButtonColor || (theme === 'default' ? GRAY : WHITE), + }); + }, }, }); diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index a1d8e3cfc..a28fa1c59 100644 --- a/packages/dialog/index.wxml +++ b/packages/dialog/index.wxml @@ -35,7 +35,7 @@ loading="{{ loading.cancel }}" class="van-dialog__button van-hairline--right" custom-class="van-dialog__cancel cancle-button-class" - custom-style="color: {{ cancelButtonColor }}" + custom-style="color: {{ innerCancelButtonColor }}" bind:click="onCancel" > {{ cancelButtonText }} @@ -46,7 +46,7 @@ class="van-dialog__button" loading="{{ loading.confirm }}" custom-class="van-dialog__confirm confirm-button-class" - custom-style="color: {{ confirmButtonColor }}" + custom-style="color: {{ innerConfirmButtonColor }}" button-id="{{ confirmButtonId }}" open-type="{{ confirmButtonOpenType }}" lang="{{ lang }}" @@ -81,7 +81,7 @@ loading="{{ loading.cancel }}" class="van-dialog__button van-hairline--right" custom-class="van-dialog__cancel cancle-button-class" - custom-style="color: {{ cancelButtonColor }}" + custom-style="color: {{ innerCancelButtonColor }}" bind:click="onCancel" > {{ cancelButtonText }} @@ -97,7 +97,7 @@ class="van-dialog__button" loading="{{ loading.confirm }}" custom-class="van-dialog__confirm confirm-button-class" - custom-style="color: {{ confirmButtonColor }}" + custom-style="color: {{ innerConfirmButtonColor }}" button-id="{{ confirmButtonId }}" open-type="{{ confirmButtonOpenType }}" lang="{{ lang }}" From 2a045f70d27764cdcb582c0fc0e98a75a6099889 Mon Sep 17 00:00:00 2001 From: johnsonwong666 <1067100250@qq.com> Date: Thu, 14 Mar 2024 20:48:55 +0800 Subject: [PATCH 2/2] fix(Dialog): use wxs to set button color --- packages/dialog/index.ts | 14 -------------- packages/dialog/index.wxml | 9 +++++---- packages/dialog/index.wxs | 26 ++++++++++++++++++++++++++ 3 files changed, 31 insertions(+), 18 deletions(-) create mode 100644 packages/dialog/index.wxs diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts index 8c7025609..a11350c90 100644 --- a/packages/dialog/index.ts +++ b/packages/dialog/index.ts @@ -1,6 +1,5 @@ import { VantComponent } from '../common/component'; import { button } from '../mixins/button'; -import { GRAY, RED, WHITE } from '../common/color'; import { toPromise } from '../common/utils'; import type { Action } from './dialog'; @@ -13,7 +12,6 @@ VantComponent({ type: Boolean, observer(show: boolean) { !show && this.stopLoading(); - this.handleButtonColor(); }, }, title: String, @@ -80,8 +78,6 @@ VantComponent({ confirm: false, cancel: false, }, - innerConfirmButtonColor: '', - innerCancelButtonColor: '', callback: (() => {}) as unknown as ( action: string, context: WechatMiniprogram.Component.TrivialInstance @@ -146,15 +142,5 @@ VantComponent({ }); } }, - - handleButtonColor() { - const { confirmButtonColor, cancelButtonColor, theme } = this.data; - this.setData({ - innerConfirmButtonColor: - confirmButtonColor || (theme === 'default' ? RED : WHITE), - innerCancelButtonColor: - cancelButtonColor || (theme === 'default' ? GRAY : WHITE), - }); - }, }, }); diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index a28fa1c59..a457a8bce 100644 --- a/packages/dialog/index.wxml +++ b/packages/dialog/index.wxml @@ -1,4 +1,5 @@ + {{ cancelButtonText }} @@ -46,7 +47,7 @@ class="van-dialog__button" loading="{{ loading.confirm }}" custom-class="van-dialog__confirm confirm-button-class" - custom-style="color: {{ innerConfirmButtonColor }}" + custom-style="{{computed.buttonColor({theme, confirmButtonColor, buttonName: 'confirmButton'})}}" button-id="{{ confirmButtonId }}" open-type="{{ confirmButtonOpenType }}" lang="{{ lang }}" @@ -81,7 +82,7 @@ loading="{{ loading.cancel }}" class="van-dialog__button van-hairline--right" custom-class="van-dialog__cancel cancle-button-class" - custom-style="color: {{ innerCancelButtonColor }}" + custom-style="{{computed.buttonColor({theme, cancelButtonColor, buttonName: 'cancelButton'})}}" bind:click="onCancel" > {{ cancelButtonText }} @@ -97,7 +98,7 @@ class="van-dialog__button" loading="{{ loading.confirm }}" custom-class="van-dialog__confirm confirm-button-class" - custom-style="color: {{ innerConfirmButtonColor }}" + custom-style="{{computed.buttonColor({theme, confirmButtonColor, buttonName: 'confirmButton'})}}" button-id="{{ confirmButtonId }}" open-type="{{ confirmButtonOpenType }}" lang="{{ lang }}" diff --git a/packages/dialog/index.wxs b/packages/dialog/index.wxs new file mode 100644 index 000000000..c245b03c5 --- /dev/null +++ b/packages/dialog/index.wxs @@ -0,0 +1,26 @@ +/* eslint-disable */ +var style = require('../wxs/style.wxs'); +var RED = '#ee0a24'; +var WHITE = '#fff'; +var GRAY = '#323233'; +function buttonColor(data) { + var type = data.buttonName; + var theme = data.theme; + var color = ''; + switch (type) { + case 'confirmButton': + color = data.confirmButtonColor || (theme === 'default' ? RED : WHITE); + break; + case 'cancelButton': + color = data.cancelButtonColor || (theme === 'default' ? GRAY : WHITE); + break; + } + + return style({ + color: color, + }); +} + +module.exports = { + buttonColor: buttonColor, +};