chore(Dialog): rename round theme to round-button

This commit is contained in:
chenjiahan 2020-08-03 21:31:40 +08:00
parent 9e86cfbdd8
commit c72927f404
4 changed files with 16 additions and 13 deletions

View File

@ -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>
); );

View File

@ -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
}); });

View File

@ -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
}); });

View File

@ -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'),
}); });
}, },