blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Dialog): update demo (#7007)

Browse Source
This commit is contained in:
neverland 2020-08-14 20:27:02 +08:00 committed by GitHub
parent 4f9eeec752
commit b6e42d2344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 80 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/dialog/README.md
View File

@ -30,6 +30,23 @@ Dialog.alert({
}); });
``` ```
### Confirm dialog
Used to confirm some messages, including a confirm button and a cancel button.
```js
Dialog.confirm({
title: 'Title',
message: 'Content',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### Round Button Style ### Round Button Style
Use round button style. Use round button style.
@ -51,23 +68,6 @@ Dialog.alert({
}); });
``` ```
### Confirm dialog
Used to confirm some messages, including a confirm button and a cancel button.
```js
Dialog.confirm({
title: 'Title',
message: 'Content',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### Asnyc Close ### Asnyc Close
```js ```js

34
src/dialog/README.zh-CN.md
View File

@ -56,6 +56,23 @@ Dialog.alert({
}); });
``` ```
### 消息确认
用于确认消息，包含取消和确认按钮。
```js
Dialog.confirm({
title: '标题',
message: '弹窗内容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### 圆角按钮风格 ### 圆角按钮风格
将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。 将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。
@ -77,23 +94,6 @@ Dialog.alert({
}); });
``` ```
### 消息确认
用于确认消息，包含取消和确认按钮。
```js
Dialog.confirm({
title: '标题',
message: '弹窗内容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### 异步关闭 ### 异步关闭
通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。 通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

45
src/dialog/demo/index.vue
View File

@ -1,39 +1,22 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('alert1')"> <demo-block card :title="t('basicUsage')">
<van-button type="primary" @click="onClickAlert"> <van-cell is-link :title="t('alert1')" @click="onClickAlert" />
{{ t('alert1') }} <van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
</van-button> <van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
<van-button type="primary" @click="onClickAlert2">
{{ t('alert2') }}
</van-button>
</demo-block> </demo-block>
<demo-block :title="t('roundButton')"> <demo-block card :title="t('roundButton')">
<van-button type="primary" @click="onClickRound"> <van-cell is-link :title="t('alert1')" @click="onClickRound" />
{{ t('alert1') }} <van-cell is-link :title="t('alert2')" @click="onClickRound2" />
</van-button>
<van-button type="primary" @click="onClickRound2">
{{ t('alert2') }}
</van-button>
</demo-block> </demo-block>
<demo-block :title="t('confirm')"> <demo-block card :title="t('asyncClose')">
<van-button type="primary" @click="onClickConfirm"> <van-cell is-link :title="t('asyncClose')" @click="onClickAsyncClose" />
{{ t('confirm') }}
</van-button>
</demo-block> </demo-block>
<demo-block :title="t('asyncClose')"> <demo-block card :title="t('componentCall')">
<van-button type="primary" @click="onClickAsyncClose"> <van-cell is-link :title="t('componentCall')" @click="show = true" />
{{ t('asyncClose') }}
</van-button>
</demo-block>
<demo-block :title="t('componentCall')">
<van-button type="primary" @click="show = true">
{{ t('componentCall') }}
</van-button>
<van-dialog <van-dialog
v-model="show" v-model="show"
:title="t('title')" :title="t('title')"
@ -135,12 +118,6 @@ export default {
@import '../../style/var'; @import '../../style/var';
.demo-dialog { .demo-dialog {
background-color: @white;
.van-doc-demo-block > .van-button {
margin-left: @padding-md;
}
img { img {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;

68
src/dialog/test/__snapshots__/demo.spec.js.snap
View File

@ -2,39 +2,41 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div><button class="van-button van-button--primary van-button--normal"> <div>
<div class="van-button__content"><span class="van-button__text"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
提示弹窗 <div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</span></div> <!----></i>
</button> <button class="van-button van-button--primary van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
提示弹窗（无标题） <div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</span></div> <!----></i>
</button></div> </div>
<div><button class="van-button van-button--primary van-button--normal"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-button__content"><span class="van-button__text"> <div class="van-cell__title"><span>确认弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
提示弹窗 <!----></i>
</span></div> </div>
</button> <button class="van-button van-button--primary van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text"> <div>
提示弹窗（无标题） <div role="button" tabindex="0" class="van-cell van-cell--clickable">
</span></div> <div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</button></div> <!----></i>
<div><button class="van-button van-button--primary van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
确认弹窗 <div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</span></div> <!----></i>
</button></div> </div>
<div><button class="van-button van-button--primary van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text"> <div>
异步关闭 <div role="button" tabindex="0" class="van-cell van-cell--clickable">
</span></div> <div class="van-cell__title"><span>异步关闭</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</button></div> <!----></i>
<div><button class="van-button van-button--primary van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text"> </div>
组件调用 <div>
</span></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
</button> <div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce"> <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
<div class="van-dialog__header">标题</div> <div class="van-dialog__header">标题</div>
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div> <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>