docs_vue2/one/docs/demo/dialog/async.vue

122 lines
3.1 KiB
Vue
Raw Normal View History

2020-08-13 11:47:56 +08:00
<template>
<article>
<veui-button
:disabled="submitting"
@click="submitOpen = true"
>
Submit
</veui-button>
<veui-button
:disabled="saving"
@click="saveOpen = true"
>
Save
</veui-button>
<veui-dialog
title="System"
:open.sync="submitOpen"
:before-close="submit"
:closable="false"
:escapable="!submitting"
:loading="submitting"
>
Confirm to create the issue?
</veui-dialog>
<veui-dialog
title="System"
:open.sync="saveOpen"
:closable="false"
:escapable="!submitting"
>
Confirm to save the post?
<template #foot>
<veui-button
ui="primary"
:loading="saving"
@click="save('ok')"
>
OK
</veui-button>
<veui-button
:disabled="saving"
@click="save"
>
Cancel
</veui-button>
</template>
</veui-dialog>
</article>
</template>
<script>
import { Dialog, Button } from 'veui'
import toast from 'veui/managers/toast'
function fakeRequest () {
return new Promise(resolve =>
setTimeout(() => {
resolve(Math.random() < 0.5)
}, 2000)
)
}
export default {
components: {
'veui-dialog': Dialog,
'veui-button': Button
},
data () {
return {
submitOpen: false,
saveOpen: false,
submitting: false,
saving: false
}
},
methods: {
submit (type) {
if (type === 'ok') {
this.submitting = true
return fakeRequest().then(success => {
this.submitting = false
if (!success) {
toast.error('Failed to create the issue. Please retry.')
return false
}
toast.success('Issue created successfully!')
})
}
},
save (type) {
if (type === 'ok') {
this.saving = true
return fakeRequest().then(success => {
this.saving = false
if (!success) {
toast.error('Failed to save the post. Please retry.')
} else {
toast.success('Post saved successfully!')
this.saveOpen = false
}
})
}
this.saveOpen = false
}
}
}
</script>
2021-09-15 20:03:51 +08:00
<style lang="less" scoped>
2020-08-13 11:47:56 +08:00
article > .veui-button {
margin-right: 20px;
}
</style>
<docs>
当你希望统一处理用户可能触发对话框关闭的操作请使用 `before-close` 属性传入统一的处理函数此时无论是点击确定/取消按钮关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作都会统一进入 `before-close` 的处理流程如果逻辑相对简单比如取消时没有额外逻辑可以直接操作 `open` 属性来关闭对话框
</docs>
<docs locale="en-US">
When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking OK/Cancel buttons, the close button or pressing <kbd>esc</kbd>, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate `open` prop directly to close the dialog.
</docs>