mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Dialog: add confirmButtonText、cancelButtonText prop (#3107)
This commit is contained in:
neverland
GitHub
parent
d3054fd4b0
commit
fc412ce1aa
@ -14,8 +14,10 @@ export default sfc({
|
||||
callback: Function,
|
||||
beforeClose: Function,
|
||||
messageAlign: String,
|
||||
confirmButtonText: String,
|
||||
cancelButtonText: String,
|
||||
cancelButtonColor: String,
|
||||
confirmButtonText: String,
|
||||
confirmButtonColor: String,
|
||||
showCancelButton: Boolean,
|
||||
showConfirmButton: {
|
||||
type: Boolean,
|
||||
@ -102,6 +104,7 @@ export default sfc({
|
||||
class={bem('cancel')}
|
||||
loading={this.loading.cancel}
|
||||
text={this.cancelButtonText || t('cancel')}
|
||||
style={{ color: this.cancelButtonColor }}
|
||||
onClick={() => {
|
||||
this.handleAction('cancel');
|
||||
}}
|
||||
@ -113,6 +116,7 @@ export default sfc({
|
||||
class={[bem('confirm'), { 'van-hairline--left': hasButtons }]}
|
||||
loading={this.loading.confirm}
|
||||
text={this.confirmButtonText || t('confirm')}
|
||||
style={{ color: this.confirmButtonColor }}
|
||||
onClick={() => {
|
||||
this.handleAction('confirm');
|
||||
}}
|
||||
|
||||
@ -121,8 +121,10 @@ export default {
|
||||
| className | Custom className | `String | Array | Object` | - |
|
||||
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` |
|
||||
| showCancelButton | Whether to show cancel button | `Boolean` | `false` |
|
||||
| cancelButtonText | Cancel button text | `String` | `Cancel` |
|
||||
| cancelButtonColor | Cancel button color | `String` | `#000` |
|
||||
| confirmButtonText | Confirm button text | `String` | `Confirm` |
|
||||
| cancelButtonText | Cancel button test | `String` | `Cancel` |
|
||||
| confirmButtonColor | Confirm button color | `String` | `#1989fa` |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` |
|
||||
| lockScroll | Whether to lock body scroll | `Boolean` | `true` |
|
||||
@ -139,8 +141,10 @@ export default {
|
||||
| message-align | Message align，can be set to `left` `right` | `String` | `center` |
|
||||
| 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` |
|
||||
| cancel-button-text | Cancel button text | `String` | `Cancel` |
|
||||
| cancel-button-color | Cancel button color | `String` | `#000` |
|
||||
| confirm-button-text | Confirm button text | `String` | `Confirm` |
|
||||
| confirm-button-color | Confirm button color | `String` | `#1989fa` |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` |
|
||||
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
|
||||
|
||||
@ -46,8 +46,10 @@ Dialog.defaultOptions = {
|
||||
beforeClose: null,
|
||||
messageAlign: '',
|
||||
getContainer: 'body',
|
||||
confirmButtonText: '',
|
||||
cancelButtonText: '',
|
||||
cancelButtonColor: null,
|
||||
confirmButtonText: '',
|
||||
confirmButtonColor: null,
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
closeOnClickOverlay: false,
|
||||
|
||||
13
packages/dialog/test/__snapshots__/index.spec.js.snap
Normal file
13
packages/dialog/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`button color 1`] = `
|
||||
<div class="van-dialog" name="van-dialog-bounce">
|
||||
<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>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`button text 1`] = `
|
||||
<div class="van-dialog" name="van-dialog-bounce">
|
||||
<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>
|
||||
</div>
|
||||
`;
|
||||
@ -76,3 +76,27 @@ test('register component', () => {
|
||||
Vue.use(Dialog);
|
||||
expect(Vue.component(DialogVue.name)).toBeTruthy();
|
||||
});
|
||||
|
||||
test('button color', () => {
|
||||
const wrapper = mount(DialogVue, {
|
||||
propsData: {
|
||||
value: true,
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: 'white',
|
||||
confirmButtonColor: 'red'
|
||||
}
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('button text', () => {
|
||||
const wrapper = mount(DialogVue, {
|
||||
propsData: {
|
||||
value: true,
|
||||
showCancelButton: true,
|
||||
cancelButtonText: 'Custom cancel',
|
||||
confirmButtonText: 'Custom confirm'
|
||||
}
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -124,8 +124,10 @@ export default {
|
||||
| className | 自定义类名 | `String | Array | Object` | - | 1.1.7 |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
|
||||
| cancelButtonText | 取消按钮文案 | `String` | `取消` | - |
|
||||
| cancelButtonColor | 取消按钮颜色 | `String` | `#000` | 1.6.14 |
|
||||
| confirmButtonText | 确认按钮文案 | `String` | `确认` | - |
|
||||
| confirmButtonColor | 确认按钮颜色 | `String` | `#1989fa` | 1.6.14 |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
|
||||
| lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
|
||||
@ -144,8 +146,10 @@ export default {
|
||||
| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` | 1.5.0 |
|
||||
| show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` | - |
|
||||
| show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` | - |
|
||||
| confirm-button-text | 确认按钮的文案 | `String` | `确认` | - |
|
||||
| cancel-button-text | 取消按钮的文案 | `String` | `取消` | - |
|
||||
| cancel-button-text | 取消按钮文案 | `String` | `取消` | - |
|
||||
| cancel-button-color | 取消按钮颜色 | `String` | `#000` | 1.6.14 |
|
||||
| confirm-button-text | 确认按钮文案 | `String` | `确认` | - |
|
||||
| confirm-button-color | 确认按钮颜色 | `String` | `#1989fa` | 1.6.14 |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
|
||||
| close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `false` | - |
|
||||
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
|
||||
|
||||
4
types/dialog.d.ts
vendored
4
types/dialog.d.ts
vendored
@ -8,8 +8,10 @@ export type DialogOptions = {
|
||||
className?: any;
|
||||
lockScroll?: boolean;
|
||||
messageAlign?: string;
|
||||
confirmButtonText?: string;
|
||||
cancelButtonText?: string;
|
||||
cancelButtonColor?: string;
|
||||
confirmButtonText?: string;
|
||||
confirmButtonColor?: string;
|
||||
showConfirmButton?: boolean;
|
||||
showCancelButton?: boolean;
|
||||
closeOnClickOverlay?: boolean;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user