Notification 通知

用于显示操作反馈通知

类型

通过 type 来设置通知类型，可选值有 info success warning error

<template>
  <div class="flex gap-x-3 flex-nowrap">
    <button class="btn btn-primary" @click="toastFunc('primary')">primary</button>
    <button class="btn btn-info" @click="toastFunc('info')">info</button>
    <button class="btn btn-success" @click="toastFunc('success')">success</button>
    <button class="btn btn-warning" @click="toastFunc('warning')">warn</button>
    <button class="btn btn-error" @click="toastFunc('error')">error</button>
  </div>
</template>

<script setup lang="ts">
import { Notification, type NotificationType } from 'li-daisy'

const toastFunc = (type: NotificationType) => {
  const options = {
    title: '这是通知标题',
    message: `这是一条 ${type} 通知`,
  }

  switch (type) {
    case 'primary':
      return Notification.primary({
        ...options,
      })
    case 'info':
      return Notification.info({
        ...options,
      })
    case 'success':
      return Notification.success({
        ...options,
      })
    case 'warning':
      return Notification.warning({
        ...options,
      })
    case 'error':
      return Notification.error({
        ...options,
      })
  }
}
</script>

位置

通过 position 来设置通知位置，可选值有 top-start top-center top-end bottom-start bottom-end

<template>
  <div class="flex gap-x-3 flex-nowrap">
    <button class="btn" @click="toastFunc('top-start')">top-start</button>
    <button class="btn" @click="toastFunc('top-end')">top-end</button>
    <button class="btn" @click="toastFunc('bottom-start')">bottom-start</button>
    <button class="btn" @click="toastFunc('bottom-end')">bottom-end</button>
  </div>
</template>

<script setup lang="ts">
import { Notification, type NotificationPosition } from 'li-daisy'

const toastFunc = (position: NotificationPosition) => {
  const options = {
    title: '这是通知标题',
    message: `该通知位于 ${position}`,
    position: position,
  }

  Notification.info({
    ...options,
  })
}
</script>

关闭图标

通过 showCloseIcon 来设置是否显示关闭图标，默认值为 false 当 showCloseIcon 设置为true时, autoClose必定为 true，即使给定值为 false 也不会生效

<template>
  <div class="space-x-3">
    <button class="btn" @click="toastFunc">此通知无关闭图标</button>
  </div>
</template>

<script setup lang="ts">
import { Notification } from 'li-daisy'

const toastFunc = () => {
  Notification.info({
    title: '这是通知标题',
    message: `这条通知无关闭图标`,
    showCloseIcon: false,
    // 此时即使设置了autoClose为false 该通知依旧会自动关闭
    autoClose: false,
  })
}
</script>

Vnode

message 参数也可为 Vnode

<template>
  <div class="space-x-3">
    <button class="btn btn-primary btn-dash" @click="vnodeNotification">vnode消息</button>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { Notification } from 'li-daisy'

const vnodeNotification = () => {
  Notification.info({
    title: '系统更新通知',
    message: h('div', { class: 'space-y-2' }, [
      h('div', { class: 'flex items-center space-x-2' }, [
        h('span', { class: 'font-medium text-primary' }, '版本 v1.5.2 已发布'),
      ]),
      h('p', { class: 'text-sm text-secondary' }, '本次更新包含以下新功能：'),
      h('ul', { class: 'text-sm text-base list-disc list-inside space-y-1' }, [
        h('li', null, '使用queue组件重构新版toast'),
        h('li', null, '修复已知 Bug'),
      ]),
    ]),
    duration: 5000,
  })
}
</script>

API

配置项

参数	类型	默认值	说明
title	string	-	通知标题
message	[string,Vnode]	-	通知内容
type	NotificationType	'info'	通知类型
position	NotificationPosition	'top-end'	通知位置
duration	number	2000	自动消失时间（毫秒）低于1000无效
autoClose	boolean	true	是否自动关闭
showCloseIcon	boolean	false	是否显示右上角关闭图标