[Doc] update dialog document (#3068)

This commit is contained in:
neverland
2019-03-31 17:05:07 +08:00
committed by GitHub
parent 0af55e0c1f
commit 93e2dd8ffe
4 changed files with 144 additions and 136 deletions

View File

@@ -27,31 +27,31 @@
</van-button>
</demo-block>
<demo-block :title="$t('advancedUsage')">
<demo-block :title="$t('asyncClose')">
<van-button
type="primary"
plain
@click="onClickAsyncClose"
>
{{ $t('asyncClose') }}
</van-button>
</demo-block>
<demo-block :title="$t('componentCall')">
<van-button
type="danger"
plain
@click="show = true"
>
{{ $t('advancedUsage') }}
{{ $t('componentCall') }}
</van-button>
<van-dialog
v-model="show"
:title="$t('title')"
show-cancel-button
:lazy-render="false"
:before-close="beforeClose"
>
<van-field
v-model="username"
:label="$t('username')"
:placeholder="$t('usernamePlaceholder')"
/>
<van-field
v-model="password"
type="password"
:label="$t('password')"
:placeholder="$t('passwordPlaceholder')"
/>
<img :src="image">
</van-dialog>
</demo-block>
</demo-section>
@@ -61,23 +61,27 @@
export default {
i18n: {
'zh-CN': {
alert1: '消息提示',
alert2: '无标题提示',
confirm: '消息确认',
content: '有赞是一家零售科技公司,致力于成为商家服务领域里最被信任的引领者'
alert1: '提示弹窗',
alert2: '提示弹窗(无标题',
confirm: '确认弹窗',
asyncClose: '异步关闭',
componentCall: '组件调用',
content: '代码是写出来给人看的,附带能在机器上运行'
},
'en-US': {
alert1: 'Alert',
alert2: 'Alert without title',
confirm: 'Confirm dialog'
confirm: 'Confirm dialog',
asyncClose: 'Async Close',
componentCall: 'Component Call',
}
},
data() {
return {
show: false,
username: '',
password: ''
currentRate: 0,
image: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg'
};
},
@@ -102,12 +106,20 @@ export default {
});
},
beforeClose(action, done) {
if (action === 'confirm') {
setTimeout(done, 1000);
} else {
done();
onClickAsyncClose() {
function beforeClose(action, done) {
if (action === 'confirm') {
setTimeout(done, 1000);
} else {
done();
}
}
this.$dialog.confirm({
title: this.$t('title'),
message: this.$t('content'),
beforeClose
});
}
}
};
@@ -118,5 +130,11 @@ export default {
.van-doc-demo-block > .van-button {
margin-left: 15px;
}
img {
width: 100%;
padding: 25px 20px 0;
box-sizing: border-box;
}
}
</style>