Code
<template>
<div>
<w-stack gap="small">
<w-button label="Show modal 1" @click="showModal1 = true" />
</w-stack>
<w-modal v-bind="$props" v-model="showModal1" title="Service details">
<template #body>
<w-stack direction="column" gap="medium">
<w-input label="Service name" type="text" value="EEG Scan" />
<w-input label="Price" type="number" value="60">
<template #suffix>
<span>€</span>
</template>
</w-input>
<w-fieldset label="Calendars with this service">
<w-checkbox
v-model="selected"
label="John Coen"
value="john-coen"
/>
<w-checkbox
v-model="selected"
label="Alexa Smith"
value="alexa-smith"
/>
<w-checkbox
v-model="selected"
label="Noel Kravitsky"
value="noel-kravitsky"
/>
</w-fieldset>
</w-stack>
</template>
<template #footer>
<w-button label="Cancel" @click="showModal1 = false" />
<w-button
label="Delete service"
variant="danger"
@click="showModal2 = true"
/>
</template>
</w-modal>
<w-modal v-bind="$props" v-model="showModal2" title="Delete service?">
<template #body>
<w-text>
Service will be deleted from all calendars and you will not be able
to recover it.
</w-text>
</template>
<template #footer>
<w-button label="Cancel" @click="showModal2 = false" />
<w-button label="Delete service" variant="danger" @click="onClose" />
</template>
</w-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal1: false,
showModal2: false,
selected: []
};
},
methods: {
onClose() {
this.showModal1 = false;
this.showModal2 = false;
}
}
};
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
close-on-click-outside |
Decides if the modal can be closed by clicking outside of it. |
boolean |
|
|
|
disable-teleport |
Toggles teleporting of the modal to the target element |
boolean |
|
|
|
v-model model-value v2, wc show v1 |
State of the modal |
boolean |
|
|
|
size |
Size of the modal dialog |
string |
medium |
medium | large | xlarge |
|
target |
Type string or an actual DOM node where you want render component |
string|object |
body |
|
|
title Required |
Title of the modal dialog displayed in the header |
string |
|
|
|
translations |
Provide values as translated strings. |
object |
{ closeBtnAriaLabel: 'Close' } |
Object with the following key: closeBtnAriaLabel |
|
prevent-close |
When true, prevents the user from closing the modal through UI interactions (close button, ESC key, clicking outside, browser back button). Modal can only be closed programmatically through v-model. |
boolean |
|
|
|
fade-content |
When true, shows a fade effect at the bottom of the modal body when content is scrollable |
boolean |
|
|
Slots
|
Name |
Description |
|---|---|
|
body |
Slot for body content |
|
footer |
Optional slot for footer content |
Events
|
Name |
Description |
Type |
|---|---|---|
|
v-model update:modelValue v2, wc toggle v1 |
Emitted on modal close |
{ "names": [ "Boolean" ] } |