mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore(Dialog): rename round theme to round-button
This commit is contained in:
parent
9e86cfbdd8
commit
c72927f404
@ -225,7 +225,9 @@ export default createComponent({
|
|||||||
>
|
>
|
||||||
{Title}
|
{Title}
|
||||||
{this.genContent(title, messageSlot)}
|
{this.genContent(title, messageSlot)}
|
||||||
{this.theme === 'round' ? this.genRoundButtons() : this.genButtons()}
|
{this.theme === 'round-button'
|
||||||
|
? this.genRoundButtons()
|
||||||
|
: this.genButtons()}
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
);
|
);
|
||||||
|
@ -30,22 +30,22 @@ Dialog.alert({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### Round Style
|
### Round Button Style
|
||||||
|
|
||||||
use round style.
|
Use round button style.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
title: 'Title',
|
title: 'Title',
|
||||||
message: 'Content',
|
message: 'Content',
|
||||||
theme: 'round',
|
theme: 'round-button',
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// on close
|
// on close
|
||||||
});
|
});
|
||||||
|
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
message: 'Content',
|
message: 'Content',
|
||||||
theme: 'round',
|
theme: 'round-button',
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// on close
|
// on close
|
||||||
});
|
});
|
||||||
|
@ -56,22 +56,22 @@ Dialog.alert({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 圆角风格
|
### 圆角按钮风格
|
||||||
|
|
||||||
样式为圆角风格。
|
将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗,该选项从 2.10.0 版本开始支持。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
title: '标题',
|
title: '标题',
|
||||||
message: '弹窗内容',
|
message: '弹窗内容',
|
||||||
theme: 'round',
|
theme: 'round-button',
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// on close
|
// on close
|
||||||
});
|
});
|
||||||
|
|
||||||
Dialog.alert({
|
Dialog.alert({
|
||||||
message: '弹窗内容',
|
message: '弹窗内容',
|
||||||
theme: 'round',
|
theme: 'round-button',
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// on close
|
// on close
|
||||||
});
|
});
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
</van-button>
|
</van-button>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('round')">
|
<demo-block :title="t('roundButton')">
|
||||||
<van-button type="primary" @click="onClickRound">
|
<van-button type="primary" @click="onClickRound">
|
||||||
{{ t('alert1') }}
|
{{ t('alert1') }}
|
||||||
</van-button>
|
</van-button>
|
||||||
@ -52,7 +52,7 @@ export default {
|
|||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
alert1: '提示弹窗',
|
alert1: '提示弹窗',
|
||||||
alert2: '提示弹窗(无标题)',
|
alert2: '提示弹窗(无标题)',
|
||||||
round: '圆角样式',
|
round: '圆角按钮样式',
|
||||||
confirm: '确认弹窗',
|
confirm: '确认弹窗',
|
||||||
asyncClose: '异步关闭',
|
asyncClose: '异步关闭',
|
||||||
componentCall: '组件调用',
|
componentCall: '组件调用',
|
||||||
@ -61,6 +61,7 @@ export default {
|
|||||||
'en-US': {
|
'en-US': {
|
||||||
alert1: 'Alert',
|
alert1: 'Alert',
|
||||||
alert2: 'Alert without title',
|
alert2: 'Alert without title',
|
||||||
|
round: 'Round Button Style',
|
||||||
confirm: 'Confirm dialog',
|
confirm: 'Confirm dialog',
|
||||||
asyncClose: 'Async Close',
|
asyncClose: 'Async Close',
|
||||||
componentCall: 'Component Call',
|
componentCall: 'Component Call',
|
||||||
@ -91,7 +92,7 @@ export default {
|
|||||||
|
|
||||||
onClickRound() {
|
onClickRound() {
|
||||||
this.$dialog.alert({
|
this.$dialog.alert({
|
||||||
theme: 'round',
|
theme: 'round-button',
|
||||||
title: this.t('title'),
|
title: this.t('title'),
|
||||||
message: this.t('content'),
|
message: this.t('content'),
|
||||||
});
|
});
|
||||||
@ -99,7 +100,7 @@ export default {
|
|||||||
|
|
||||||
onClickRound2() {
|
onClickRound2() {
|
||||||
this.$dialog.alert({
|
this.$dialog.alert({
|
||||||
theme: 'round',
|
theme: 'round-button',
|
||||||
message: this.t('content'),
|
message: this.t('content'),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user