Play UIMessage New
New
Displaying global notification and reminder messages.
Usage
content
Set message content.
<template>
<PlButton @click="handleClick">
open message
</PlButton>
</template>
<script setup lang="ts">
const handleClick = () => {
PlMessage({
content: 'This is message content.',
})
}
</script><template>
<PlButton @click="handleClick">
open message
</PlButton>
</template>
<script setup lang="ts">
const handleClick = () => {
PlMessage({
content: 'This is message content.',
})
}
</script>autoClose
Set whether to automatically close.
<template>
<PlButton @click="handleClick">
open message
</PlButton>
</template>
<script setup lang="ts">
const handleClick = () => {
PlMessage({
autoClose: false,
content: 'This is message content.',
})
}
</script><template>
<PlButton @click="handleClick">
open message
</PlButton>
</template>
<script setup lang="ts">
const handleClick = () => {
PlMessage({
autoClose: false,
content: 'This is message content.',
})
}
</script>state
Set message state.
<template>
<div class="flex gap-2">
<PlButton @click="handleClick('info')">
info
</PlButton>
<PlButton @click="handleClick('success')">
success
</PlButton>
<PlButton @click="handleClick('warning')">
warning
</PlButton>
<PlButton @click="handleClick('danger')">
danger
</PlButton>
</div>
</template>
<script setup lang="ts">
const handleClick = (state: string) => {
PlMessage({
state,
content: 'This is message content.',
})
}
</script><template>
<div class="flex gap-2">
<PlButton @click="handleClick('info')">
info
</PlButton>
<PlButton @click="handleClick('success')">
success
</PlButton>
<PlButton @click="handleClick('warning')">
warning
</PlButton>
<PlButton @click="handleClick('danger')">
danger
</PlButton>
</div>
</template>
<script setup lang="ts">
const handleClick = (state: string) => {
PlMessage({
state,
content: 'This is message content.',
})
}
</script>closable
Set closable.
<template>
<PlButton @click="handleClick">
open message
</PlButton>
</template>
<script setup lang="ts">
const handleClick = () => {
PlMessage({
closable: false,
content: 'This is message content.',
})
}
</script><template>
<PlButton @click="handleClick">
open message
</PlButton>
</template>
<script setup lang="ts">
const handleClick = () => {
PlMessage({
closable: false,
content: 'This is message content.',
})
}
</script>headless
Custom Message.
<template>
<PlButton @click="handleClick">
custom message
</PlButton>
</template>
<script setup lang="ts">
import { createVNode } from 'vue'
const handleClick = () => {
PlMessage(() => createVNode('div', { class: 'bg-red' }, 'custom message.'))
}
</script><template>
<PlButton @click="handleClick">
custom message
</PlButton>
</template>
<script setup lang="ts">
import { createVNode } from 'vue'
const handleClick = () => {
PlMessage(() => createVNode('div', { class: 'bg-red' }, 'custom message.'))
}
</script>Props
| Name | Type | Default | Description |
|---|---|---|---|
| content | string | '' | set message content. |
| state | 'info' | 'success' | 'warning' | 'danger' | 'info' | set message state. |
| autoClose | boolean | true | Set whether to automatically close. |
| closable | boolean | true | set closable. |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Message's content. |
| headless | () | Custom Messgae. |