Play UIModal New
New
模态对话框在页面上方的层中显示需要用户交互的内容。
Usage
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
设置模态对话框 取消 确认 按钮文案。
<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
设置模态框可以拖动。
<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
甩掉某些元素。
<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>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 | () | 模态框内容. |
| headless | () | 自定义模态框（保留了模态框显隐的基本能力）. |