Notification ^New

Displaying global notification and reminder messages.

Usage

title | content | cancelButtonText

Set notification title.

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Notifications may include alerts, sounds and icon badges.',
    cancelButtonText: 'Cancel',
    confirmButtonText: 'Ok',
    onCancel() {
      alert('Cancel')
    },
    onConfirm(notify) {
      notify.close()
    },
  })
}
</script>

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Notifications may include alerts, sounds and icon badges.',
    cancelButtonText: 'Cancel',
    confirmButtonText: 'Ok',
    onCancel() {
      alert('Cancel')
    },
    onConfirm(notify) {
      notify.close()
    },
  })
}
</script>

autoClose

Set whether to automatically close.

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Do not automatically close.',
    autoClose: false,
    onCancel() {
      alert('Cancel')
    },
    onConfirm(notify) {
      notify.close()
    },
  })
}
</script>

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Do not automatically close.',
    autoClose: false,
    onCancel() {
      alert('Cancel')
    },
    onConfirm(notify) {
      notify.close()
    },
  })
}
</script>

placement

Set notification placement.

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Notifications may include alerts, sounds and icon badges.',
    cancelButtonText: 'Cancel',
    confirmButtonText: 'Ok',
    placement: 'right',
    onCancel() {
      alert('Cancel')
    },
    onConfirm(notify) {
      notify.close()
    },
  })
}
</script>

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Notifications may include alerts, sounds and icon badges.',
    cancelButtonText: 'Cancel',
    confirmButtonText: 'Ok',
    placement: 'right',
    onCancel() {
      alert('Cancel')
    },
    onConfirm(notify) {
      notify.close()
    },
  })
}
</script>

shakeOff

Shake off somthing.

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Notifications may include alerts, sounds and icon badges.',
    shakeOff: ['icon', 'title'],
  })
}
</script>

<template>
  <PlButton @click="handleClick">
    notification
  </PlButton>
</template>

<script setup lang="ts">
const handleClick = () => {
  PlNotification({
    title: 'App notifications',
    content: 'Notifications may include alerts, sounds and icon badges.',
    shakeOff: ['icon', 'title'],
  })
}
</script>

headless

Custom notification.

<template>
  <PlButton @click="handleClick">
    custom notification
  </PlButton>
</template>

<script setup lang="ts">
import { createVNode } from 'vue'

const handleClick = () => {
  PlNotification(() => createVNode('div', { class: 'bg-red' }, 'custom notification.'))
}
</script>

<template>
  <PlButton @click="handleClick">
    custom notification
  </PlButton>
</template>

<script setup lang="ts">
import { createVNode } from 'vue'

const handleClick = () => {
  PlNotification(() => createVNode('div', { class: 'bg-red' }, 'custom notification.'))
}
</script>

Props

Name	Type	Default	Description
title	`string`	`''`	set notification title.
content	`string`	`''`	set notification title.
cancelButtonText	`string`	`''`	set notification cancel button text.
confirmButtonText	`string`	`''`	set notification confirm button text.
placement	`left \| right`	`''`	set notification placement.
autoClose	`boolean`	`true`	Set whether to automatically close.
shakeOff	`<'x-button' \| 'confirm-button' \| 'cancel-button' \| 'mask' \| 'header' \| 'footer'>[]`	`[]`	shake off somthing.

Slots

Name	Parameters	Description
default	`()`	Notification's content.
headless	`()`	Custom notification.

Notification New ​

Usage ​

title | content | cancelButtonText ​

autoClose ​

placement ​

shakeOff ​

headless ​

Props ​

Slots ​

Notification ^New

Usage

title | content | cancelButtonText

autoClose

placement

shakeOff

headless

Props

Slots