forked from quasarframework/quasar
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(q-dialog): Add configurable option to not close dialog when clic…
…king button quasarframework#17120
- Loading branch information
Showing
3 changed files
with
73 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
<template> | ||
<div class="q-pa-md q-gutter-sm"> | ||
<q-btn label="hide await Async" color="primary" @click="openDialog" /> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { useQuasar } from 'quasar' | ||
export default { | ||
setup () { | ||
const $q = useQuasar() | ||
// Simulate an asynchronous task that takes two seconds to complete | ||
function mockAsyncJob () { | ||
return new Promise((resolve) => { | ||
setTimeout(() => { | ||
resolve() | ||
}, 2000) | ||
}) | ||
} | ||
function openDialog () { | ||
const dialog = $q.dialog({ | ||
title: 'Confirm', | ||
message: 'Would you like to turn on the wifi?', | ||
ok: { | ||
push: true, | ||
loading: false, | ||
notHide: true // We don't want to close the dialog immediately after clicking the OK button | ||
}, | ||
cancel: { | ||
push: true, | ||
color: 'negative' | ||
// notHide: true // we can also set not close the dialog immediately after clicking the Cancel button | ||
}, | ||
persistent: true // we want the user to not be able to close it | ||
}).onOk(async () => { | ||
// console.log('>>>> OK') | ||
// We will manually close the dialog after waiting for the asynchronous task to complete | ||
dialog.update({ | ||
ok: { | ||
label: 'connecting', | ||
loading: true | ||
} | ||
}) | ||
await mockAsyncJob() | ||
dialog.update({ | ||
ok: { | ||
loading: false | ||
} | ||
}) | ||
dialog.hide() | ||
}).onCancel(() => { | ||
// console.log('>>>> Cancel') | ||
}).onDismiss(() => { | ||
// console.log('I am triggered on both OK and Cancel') | ||
}) | ||
} | ||
return { openDialog } | ||
} | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters