mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Dialog): add new prop theme (#6921)
* feat(dialog): add new prop button-theme & change default confirm button text color * test(dialog): update snapshot * refactor(dialog): rename button-theme to theme * refactor(dialog): add theme definition * docs(dialog): add version tip & change default confirm-button-color
This commit is contained in:
rex
GitHub
parent
39c6637894
commit
26c754e2f6
@ -2,6 +2,8 @@ import { createNamespace, addUnit } from '../utils';
|
||||
import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
import Button from '../button';
|
||||
import GoodsAction from '../goods-action';
|
||||
import GoodsActionButton from '../goods-action-button';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('dialog');
|
||||
|
||||
@ -11,6 +13,10 @@ export default createComponent({
|
||||
props: {
|
||||
title: String,
|
||||
width: [Number, String],
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
message: String,
|
||||
className: null,
|
||||
callback: Function,
|
||||
@ -100,6 +106,37 @@ export default createComponent({
|
||||
this.$emit('closed');
|
||||
},
|
||||
|
||||
genRoundButtons() {
|
||||
return (
|
||||
<GoodsAction class={bem('footer', [this.theme])}>
|
||||
{this.showCancelButton && (
|
||||
<GoodsActionButton
|
||||
size="large"
|
||||
type="warning"
|
||||
loading={this.loading.cancel}
|
||||
text={this.cancelButtonText || t('cancel')}
|
||||
style={{ color: this.cancelButtonColor }}
|
||||
onClick={() => {
|
||||
this.handleAction('cancel');
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{this.showConfirmButton && (
|
||||
<GoodsActionButton
|
||||
size="large"
|
||||
type="danger"
|
||||
loading={this.loading.confirm}
|
||||
text={this.confirmButtonText || t('confirm')}
|
||||
style={{ color: this.confirmButtonColor }}
|
||||
onClick={() => {
|
||||
this.handleAction('confirm');
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</GoodsAction>
|
||||
);
|
||||
},
|
||||
|
||||
genButtons() {
|
||||
const multiple = this.showCancelButton && this.showConfirmButton;
|
||||
|
||||
@ -188,7 +225,7 @@ export default createComponent({
|
||||
>
|
||||
{Title}
|
||||
{this.genContent(title, messageSlot)}
|
||||
{this.genButtons()}
|
||||
{this.theme === 'round' ? this.genRoundButtons() : this.genButtons()}
|
||||
</div>
|
||||
</transition>
|
||||
);
|
||||
|
||||
@ -30,6 +30,27 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### Round Style
|
||||
|
||||
use round style.
|
||||
|
||||
```js
|
||||
Dialog.alert({
|
||||
title: 'Title',
|
||||
message: 'Content',
|
||||
theme: 'round',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: 'Content',
|
||||
theme: 'round',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
```
|
||||
|
||||
### Confirm dialog
|
||||
|
||||
Used to confirm some messages, including a confirm button and a cancel button.
|
||||
@ -120,13 +141,14 @@ export default {
|
||||
| width `v2.2.7` | Width | _number \| string_ | `320px` |
|
||||
| message | Message | _string_ | - |
|
||||
| messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
|
||||
| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
|
||||
| className | Custom className | _any_ | - |
|
||||
| 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_ | `black` |
|
||||
| confirmButtonText | Confirm button text | _string_ | `Confirm` |
|
||||
| confirmButtonColor | Confirm button color | _string_ | `#1989fa` |
|
||||
| confirmButtonColor | Confirm button color | _string_ | `#ee0a24` |
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
|
||||
| overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
|
||||
@ -147,12 +169,13 @@ export default {
|
||||
| width `v2.2.7` | Width | _number \| string_ | `320px` |
|
||||
| message | Message | _string_ | - |
|
||||
| message-align | Message align，can be set to `left` `right` | _string_ | `center` |
|
||||
| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
|
||||
| show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
|
||||
| show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
|
||||
| cancel-button-text | Cancel button text | _string_ | `Cancel` |
|
||||
| cancel-button-color | Cancel button color | _string_ | `black` |
|
||||
| confirm-button-text | Confirm button text | _string_ | `Confirm` |
|
||||
| confirm-button-color | Confirm button color | _string_ | `#1989fa` |
|
||||
| confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
|
||||
| overlay-style `v2.2.7` | Custom overlay style | _object_ | - |
|
||||
|
||||
@ -56,6 +56,27 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### 圆角风格
|
||||
|
||||
样式为圆角风格。
|
||||
|
||||
```js
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
theme: 'round',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: '弹窗内容',
|
||||
theme: 'round',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
```
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
@ -150,11 +171,12 @@ export default {
|
||||
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
|
||||
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
|
||||
| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
|
||||
| theme | 样式风格，可选值为`round` | _string_ | `default` |
|
||||
| className | 自定义类名 | _any_ | - |
|
||||
| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
|
||||
| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
|
||||
| confirmButtonText | 确认按钮文案 | _string_ | `确认` |
|
||||
| confirmButtonColor | 确认按钮颜色 | _string_ | `#1989fa` |
|
||||
| confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` |
|
||||
| cancelButtonText | 取消按钮文案 | _string_ | `取消` |
|
||||
| cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
|
||||
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
|
||||
@ -179,10 +201,11 @@ export default {
|
||||
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
|
||||
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
|
||||
| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
|
||||
| theme | 样式风格，可选值为`round` | _string_ | `default` |
|
||||
| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
|
||||
| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
|
||||
| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
|
||||
| confirm-button-color | 确认按钮颜色 | _string_ | `#1989fa` |
|
||||
| confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` |
|
||||
| cancel-button-text | 取消按钮文案 | _string_ | `取消` |
|
||||
| cancel-button-color | 取消按钮颜色 | _string_ | `black` |
|
||||
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
|
||||
|
||||
@ -9,6 +9,15 @@
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('round')">
|
||||
<van-button type="primary" @click="onClickRound">
|
||||
{{ t('alert1') }}
|
||||
</van-button>
|
||||
<van-button type="primary" @click="onClickRound2">
|
||||
{{ t('alert2') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('confirm')">
|
||||
<van-button type="primary" @click="onClickConfirm">
|
||||
{{ t('confirm') }}
|
||||
@ -43,6 +52,7 @@ export default {
|
||||
'zh-CN': {
|
||||
alert1: '提示弹窗',
|
||||
alert2: '提示弹窗（无标题）',
|
||||
round: '圆角样式',
|
||||
confirm: '确认弹窗',
|
||||
asyncClose: '异步关闭',
|
||||
componentCall: '组件调用',
|
||||
@ -79,6 +89,21 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
onClickRound() {
|
||||
this.$dialog.alert({
|
||||
theme: 'round',
|
||||
title: this.t('title'),
|
||||
message: this.t('content'),
|
||||
});
|
||||
},
|
||||
|
||||
onClickRound2() {
|
||||
this.$dialog.alert({
|
||||
theme: 'round',
|
||||
message: this.t('content'),
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
this.$dialog.confirm({
|
||||
title: this.t('title'),
|
||||
|
||||
@ -53,6 +53,7 @@ Dialog.defaultOptions = {
|
||||
className: '',
|
||||
allowHtml: true,
|
||||
lockScroll: true,
|
||||
theme: 'default',
|
||||
transition: 'van-dialog-bounce',
|
||||
beforeClose: null,
|
||||
overlayClass: '',
|
||||
|
||||
@ -60,6 +60,12 @@
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
&&--round {
|
||||
position: relative;
|
||||
height: auto;
|
||||
padding: 0 @padding-lg - 5px @padding-md;
|
||||
}
|
||||
|
||||
&--buttons {
|
||||
display: flex;
|
||||
|
||||
|
||||
@ -11,6 +11,15 @@ exports[`renders demo correctly 1`] = `
|
||||
提示弹窗（无标题）
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗（无标题）
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
确认弹窗
|
||||
|
||||
@ -314,7 +314,7 @@
|
||||
@dialog-message-max-height: 60vh;
|
||||
@dialog-has-title-message-text-color: @gray-7;
|
||||
@dialog-has-title-message-padding-top: @padding-sm;
|
||||
@dialog-confirm-button-text-color: @blue;
|
||||
@dialog-confirm-button-text-color: @red;
|
||||
|
||||
// Divider
|
||||
@divider-margin: @padding-md 0;
|
||||
|
||||
1
types/dialog.d.ts
vendored
1
types/dialog.d.ts
vendored
@ -7,6 +7,7 @@ export type DialogOptions = {
|
||||
title?: string;
|
||||
width?: string | number;
|
||||
message?: string;
|
||||
theme?: string;
|
||||
overlay?: boolean;
|
||||
className?: any;
|
||||
allowHtml?: boolean;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user