Skip to content

Commit fc412ce

Browse files
chenjiahanchenjiahan
authored
[new feature] Dialog: add confirmButtonText、cancelButtonText prop (youzan#3107)
1 parent d3054fd commit fc412ce

7 files changed

Lines changed: 63 additions & 10 deletions

File tree

‎packages/dialog/Dialog.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ export default sfc({
1414
callback: Function,
1515
beforeClose: Function,
1616
messageAlign: String,
17-
confirmButtonText: String,
1817
cancelButtonText: String,
18+
cancelButtonColor: String,
19+
confirmButtonText: String,
20+
confirmButtonColor: String,
1921
showCancelButton: Boolean,
2022
showConfirmButton: {
2123
type: Boolean,
@@ -102,6 +104,7 @@ export default sfc({
102104
class={bem('cancel')}
103105
loading={this.loading.cancel}
104106
text={this.cancelButtonText || t('cancel')}
107+
style={{ color: this.cancelButtonColor }}
105108
onClick={() => {
106109
this.handleAction('cancel');
107110
}}
@@ -113,6 +116,7 @@ export default sfc({
113116
class={[bem('confirm'), { 'van-hairline--left': hasButtons }]}
114117
loading={this.loading.confirm}
115118
text={this.confirmButtonText || t('confirm')}
119+
style={{ color: this.confirmButtonColor }}
116120
onClick={() => {
117121
this.handleAction('confirm');
118122
}}

‎packages/dialog/en-US.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,10 @@ export default {
121121
| className | Custom className | `String | Array | Object` | - |
122122
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` |
123123
| showCancelButton | Whether to show cancel button | `Boolean` | `false` |
124+
| cancelButtonText | Cancel button text | `String` | `Cancel` |
125+
| cancelButtonColor | Cancel button color | `String` | `#000` |
124126
| confirmButtonText | Confirm button text | `String` | `Confirm` |
125-
| cancelButtonText | Cancel button test | `String` | `Cancel` |
127+
| confirmButtonColor | Confirm button color | `String` | `#1989fa` |
126128
| overlay | Whether to show overlay | `Boolean` | `true` |
127129
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` |
128130
| lockScroll | Whether to lock body scroll | `Boolean` | `true` |
@@ -139,8 +141,10 @@ export default {
139141
| message-align | Message align，can be set to `left` `right` | `String` | `center` |
140142
| show-confirm-button | Whether to show confirm button | `Boolean` | `true` |
141143
| show-cancel-button | Whether to show cancel button | `Boolean` | `false` |
142-
| confirm-button-text | Confirm button text | `String` | `Confirm` |
143-
| cancel-button-text | Cancel button test | `String` | `Cancel` |
144+
| cancel-button-text | Cancel button text | `String` | `Cancel` |
145+
| cancel-button-color | Cancel button color | `String` | `#000` |
146+
| confirm-button-text | Confirm button text | `String` | `Confirm` |
147+
| confirm-button-color | Confirm button color | `String` | `#1989fa` |
144148
| overlay | Whether to show overlay | `Boolean` | `true` |
145149
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` |
146150
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |

‎packages/dialog/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,10 @@ Dialog.defaultOptions = {
4646
beforeClose: null,
4747
messageAlign: '',
4848
getContainer: 'body',
49-
confirmButtonText: '',
5049
cancelButtonText: '',
50+
cancelButtonColor: null,
51+
confirmButtonText: '',
52+
confirmButtonColor: null,
5153
showConfirmButton: true,
5254
showCancelButton: false,
5355
closeOnClickOverlay: false,

‎packages/dialog/test/__snapshots__/index.spec.js.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`button color 1`] = `
4+
<div class="van-dialog" name="van-dialog-bounce">
5+
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;"><span class="van-button__text">确认</span></button></div>
6+
</div>
7+
`;
8+
9+
exports[`button text 1`] = `
10+
<div class="van-dialog" name="van-dialog-bounce">
11+
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">Custom cancel</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">Custom confirm</span></button></div>
12+
</div>
13+
`;

‎packages/dialog/test/index.spec.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,27 @@ test('register component', () => {
7676
Vue.use(Dialog);
7777
expect(Vue.component(DialogVue.name)).toBeTruthy();
7878
});
79+
80+
test('button color', () => {
81+
const wrapper = mount(DialogVue, {
82+
propsData: {
83+
value: true,
84+
showCancelButton: true,
85+
cancelButtonColor: 'white',
86+
confirmButtonColor: 'red'
87+
}
88+
});
89+
expect(wrapper).toMatchSnapshot();
90+
});
91+
92+
test('button text', () => {
93+
const wrapper = mount(DialogVue, {
94+
propsData: {
95+
value: true,
96+
showCancelButton: true,
97+
cancelButtonText: 'Custom cancel',
98+
confirmButtonText: 'Custom confirm'
99+
}
100+
});
101+
expect(wrapper).toMatchSnapshot();
102+
});

‎packages/dialog/zh-CN.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,10 @@ export default {
124124
| className | 自定义类名 | `String | Array | Object` | - | 1.1.7 |
125125
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
126126
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
127-
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
128-
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
127+
| cancelButtonText | 取消按钮文案 | `String` | `取消` | - |
128+
| cancelButtonColor | 取消按钮颜色 | `String` | `#000` | 1.6.14 |
129+
| confirmButtonText | 确认按钮文案 | `String` | `确认` | - |
130+
| confirmButtonColor | 确认按钮颜色 | `String` | `#1989fa` | 1.6.14 |
129131
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
130132
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
131133
| lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
@@ -144,8 +146,10 @@ export default {
144146
| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` | 1.5.0 |
145147
| show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` | - |
146148
| show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` | - |
147-
| confirm-button-text | 确认按钮的文案 | `String` | `确认` | - |
148-
| cancel-button-text | 取消按钮的文案 | `String` | `取消` | - |
149+
| cancel-button-text | 取消按钮文案 | `String` | `取消` | - |
150+
| cancel-button-color | 取消按钮颜色 | `String` | `#000` | 1.6.14 |
151+
| confirm-button-text | 确认按钮文案 | `String` | `确认` | - |
152+
| confirm-button-color | 确认按钮颜色 | `String` | `#1989fa` | 1.6.14 |
149153
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
150154
| close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `false` | - |
151155
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |

‎types/dialog.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ export type DialogOptions = {
88
className?: any;
99
lockScroll?: boolean;
1010
messageAlign?: string;
11-
confirmButtonText?: string;
1211
cancelButtonText?: string;
12+
cancelButtonColor?: string;
13+
confirmButtonText?: string;
14+
confirmButtonColor?: string;
1315
showConfirmButton?: boolean;
1416
showCancelButton?: boolean;
1517
closeOnClickOverlay?: boolean;

0 commit comments

Comments
 (0)