An alert dialog can be triggered using the $dialog.alert() method. This method returns a promise which resolves when the dialog is dismissed.
<template>
<UIExamplesButton @click="openDialog">Show alert</UIExamplesButton>
</template>
<script setup>
import {inject} from 'vue'
import {injectionKey} from "../../../src/plugin/index.ts";
defineOptions({
name: "FeaturesExampleAlert"
})
const $dialog = inject(injectionKey)
const openDialog = () => $dialog.alert({
title: 'Alert example',
body: 'Session expired. Please login again to continue.',
}, {
okText: 'Dismiss'
})
</script>A confirm dialog can be triggered with the $dialog.confirm() method. Like the alert dialog, this method returns a promise which resolves when the dialog is dismissed. In this section we shall explore how to create a basic confirm dialog as well as the two other variations of the confirm dialog namely; soft and hard confirmation dialogs.
<template>
<UIExamplesButton @click="openDialog">Show confirm | basic</UIExamplesButton>
</template>
<script setup>
import {inject} from 'vue'
import {injectionKey} from "../../../src/plugin/index.ts";
defineOptions({
name: "FeaturesExampleConfirm"
})
const $dialog = inject(injectionKey)
const openDialog = () => $dialog.confirm({
title: 'Confirm example',
body: 'The is a low risk operation. Single click required to confirm.',
}, {
cancelText: 'No',
okText: 'Yes'
})
</script><template>
<UIExamplesButton @click="openDialog">Show confirm | soft</UIExamplesButton>
</template>
<script setup>
import {inject} from 'vue'
import {injectionKey} from "../../../src/plugin/index.ts";
defineOptions({
name: "FeaturesExampleConfirmSoft"
})
const $dialog = inject(injectionKey)
const openDialog = () => $dialog.confirm({
title: 'Soft confirm example',
body: 'This is a medium risk action. Multiple clicks required to confirm',
}, {
cancelText: 'Cancel',
okText: 'Proceed',
clicksCount: 2,
type: 'soft'
})
</script><template>
<UIExamplesButton @click="openDialog">Show confirm | hard</UIExamplesButton>
</template>
<script setup>
import {inject} from 'vue'
import {injectionKey} from "../../../src/plugin/index.ts";
defineOptions({
name: "FeaturesExampleConfirm"
})
const $dialog = inject(injectionKey)
const openDialog = () => $dialog.confirm({
title: 'Confirm example',
body: 'The requested resource is no longer available. It may have been moved or deleted',
}, {
cancelText: 'No',
okText: 'Yes',
type: 'hard'
})
</script>The $dialog.prompt() method creates a prompt dialog. Use the prompt dialog to ask user directly for input.
<template>
<UIExamplesButton @click="openDialog">Show prompt</UIExamplesButton>
</template>
<script setup>
import {inject} from 'vue'
import {injectionKey} from "../../../src/plugin/index.ts";
defineOptions({
name: "FeaturesExamplePrompt"
})
const $dialog = inject(injectionKey)
const openDialog = () => $dialog.prompt({
title: 'Prompt Example',
body: 'What is the most important thing in life?',
}, {
cancelText: 'Dismiss',
okText: 'Done',
promptHelp: 'Type in the box below and click "[+:okText]"'
}).then(result => {
if (result.canceled) return;
$dialog.alert(JSON.stringify(result))
})
</script>Add the v-confirm directive to any element to instantly cause it to trigger a confirm dialog. This dialog upon confirmation will trigger the default action or the provided callback when available.
<template>
<a href="https://example.com"
target="_blank"
v-confirm="'Confirming this dialog will take you to an external website'"
>A link</a>
<span> or a </span>
<button v-confirm="'Confirm to change button text to \'Already clicked\''"
@click="($event) => $event.target.textContent = 'Already clicked'"
>button</button>
</template>RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4