121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<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, toast } from 'veui'
|
||
|
||
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>
|
||
|
||
<style lang="less" scoped>
|
||
article > .veui-button {
|
||
margin-right: 20px;
|
||
}
|
||
</style>
|
||
|
||
<docs>
|
||
当你希望统一处理用户可能触发对话框关闭的操作，请使用 [`before-close`](#props-before-close) 属性传入统一的处理函数，此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作，都会统一进入 `before-close` 的处理流程。如果逻辑相对简单，比如取消时没有额外逻辑，可以直接操作 [`open`](#props-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`](#props-open) prop directly to close the dialog.
|
||
</docs>
|