Play UIModal New
New
A modal dialog displays content that requires user interaction, in a layer above the page.
Usage
title
Set modal title.
<template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
title="Title"
cancel-button-text="No"
confirm-button-text="Yes"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script><template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
title="Title"
cancel-button-text="No"
confirm-button-text="Yes"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script>cancelButtonText | confirmButtonText
Set modal cancel button confirm button text.
<template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
title="Title"
cancel-button-text="No"
confirm-button-text="Yes"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script><template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
title="Title"
cancel-button-text="No"
confirm-button-text="Yes"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script>draggable
Settings can be dragged.
<template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
title="Title"
cancel-button-text="No"
confirm-button-text="Yes"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script><template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
title="Title"
cancel-button-text="No"
confirm-button-text="Yes"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script>shakeOff
shake off somthing.
<template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
:shake-off="['mask', 'x-button', 'cancel-button']"
title="Title"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script><template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
:shake-off="['mask', 'x-button', 'cancel-button']"
title="Title"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
This is modal
</pl-modal>
<pl-button @click="handleClick">
open modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script>headless
custom modal.
<template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
<template #headless>
<div class="bg-red p-3">
This is custom modal.
<button @click="modal?.close()">
close
</button>
</div>
</template>
</pl-modal>
<pl-button @click="handleClick">
open custom modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script><template>
<div space-y-2 w-full>
<pl-modal
ref="modal"
draggable
@cancel="handleCancel"
@confirm="handleConfirm"
>
<template #headless>
<div class="bg-red p-3">
This is custom modal.
<button @click="modal?.close()">
close
</button>
</div>
</template>
</pl-modal>
<pl-button @click="handleClick">
open custom modal
</pl-button>
</div>
</template>
<script setup lang="ts">
import type { ModalInstance } from 'play-ui'
import { ref } from 'vue'
const modal = ref<ModalInstance>()
const handleClick = () => {
modal.value?.open()
}
const handleCancel = () => {
console.log('modal canceled!')
}
const handleConfirm = () => {
console.log('modal confirmed!')
modal.value?.close()
}
</script>Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | '' | set modal title. |
| cancelButtonText | string | Cancel | set modal cancel button text. |
| confirmButtonText | string | Confirm | set modal confirm button text. |
| draggable | boolean | false | Draggable the modal. |
| shakeOff | <'x-button' | 'confirm-button' | 'cancel-button' | 'mask' | 'header' | 'footer'>[] | [] | shake off somthing. |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Modal's content. |
| headless | () | Custom modal. |