mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Dialog): update demo (#7007)
This commit is contained in:
neverland
GitHub
parent
4f9eeec752
commit
b6e42d2344
@ -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
|
||||
|
||||
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
|
||||
|
||||
```js
|
||||
|
||||
@ -56,6 +56,23 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### 圆角按钮风格
|
||||
|
||||
将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。
|
||||
@ -77,23 +94,6 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
|
||||
|
||||
@ -1,39 +1,22 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('alert1')">
|
||||
<van-button type="primary" @click="onClickAlert">
|
||||
{{ t('alert1') }}
|
||||
</van-button>
|
||||
<van-button type="primary" @click="onClickAlert2">
|
||||
{{ t('alert2') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('alert1')" @click="onClickAlert" />
|
||||
<van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
|
||||
<van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('roundButton')">
|
||||
<van-button type="primary" @click="onClickRound">
|
||||
{{ t('alert1') }}
|
||||
</van-button>
|
||||
<van-button type="primary" @click="onClickRound2">
|
||||
{{ t('alert2') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('roundButton')">
|
||||
<van-cell is-link :title="t('alert1')" @click="onClickRound" />
|
||||
<van-cell is-link :title="t('alert2')" @click="onClickRound2" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('confirm')">
|
||||
<van-button type="primary" @click="onClickConfirm">
|
||||
{{ t('confirm') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('asyncClose')">
|
||||
<van-cell is-link :title="t('asyncClose')" @click="onClickAsyncClose" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('asyncClose')">
|
||||
<van-button type="primary" @click="onClickAsyncClose">
|
||||
{{ t('asyncClose') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('componentCall')">
|
||||
<van-button type="primary" @click="show = true">
|
||||
{{ t('componentCall') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('componentCall')">
|
||||
<van-cell is-link :title="t('componentCall')" @click="show = true" />
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
:title="t('title')"
|
||||
@ -135,12 +118,6 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-dialog {
|
||||
background-color: @white;
|
||||
|
||||
.van-doc-demo-block > .van-button {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
img {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
@ -2,39 +2,41 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<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">
|
||||
提示弹窗
|
||||
</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">
|
||||
确认弹窗
|
||||
</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></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>
|
||||
<div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<!----></i>
|
||||
</div>
|
||||
<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__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user