Li-Daisy

Appearance

Queue 队列 ​

用于显示通知消息的队列管理组件，支持多个位置的消息展示和自动排队管理，主要用于自定义组件的二次封装

自定义组件 ​

queue 支持传入自定义的 Vue 组件作为消息内容。组件的props应当为 QueueItemRef 的扩展：

以下是自定义组件部分代码

vue
<template>
  <div class="bg-base-100 shadow-lg rounded-box border border-base-100 overflow-hidden">
    <!-- 顶部彩色条 -->
    <div class="h-1 bg-linear-to-r from-primary to-secondary"></div>

    <!-- 主要内容 -->
    <div class="p-4">
      <div class="flex items-start space-x-3">
        <!-- 图标 -->
        <div class="shrink-0 text-primary">
          <BellAlertIcon class="w-5 h-5" />
        </div>

        <!-- 文本内容 -->
        <div class="flex-1 min-w-25 whitespace-nowrap">
          <h3 class="text-sm font-medium text-gray-900">{{ props.title }}</h3>
          <p class="text-sm text-gray-500 mt-1">{{ props.message }}</p>
        </div>

        <!-- 关闭按钮 -->
        <div class="shrink-0">
          <XMarkIcon class="w-5 h-5 cursor-pointer" @click="props.close()" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { QueueItemRef } from 'li-daisy'
import { BellAlertIcon, XMarkIcon } from '@heroicons/vue/24/outline'

export interface ToastProps {
  title?: string
  message?: string
}

const props = defineProps<QueueItemRef & ToastProps>()
</script>
vue
<template>
  <div class="p-4 space-y-4 mx-auto min-w-md">
    <div class="grid grid-rows-2 grid-cols-3 gap-5">
      <button class="btn" @click="showNotification('top-start')">Top Start</button>
      <button class="btn" @click="showNotification('top-center')">Top Center</button>
      <button class="btn" @click="showNotification('top-end')">Top End</button>
      <button class="btn" @click="showNotification('bottom-start')">Bottom Start</button>
      <div class="select-none" tabindex="0"></div>
      <button class="btn" @click="showNotification('bottom-end')">Bottom End</button>
    </div>
  </div>
</template>

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

import component from './toast.vue'
import type { ToastProps } from './toast.vue'

const showNotification = (position: QueuePosition) => {
  Queue.addComponent(
    component,
    {
      title: '操作成功',
      message: `消息显示在 ${position} 位置`,
    } as ToastProps,
    {
      position: position,
      onClose: () => console.log('close callback'),
    }
  )
}
</script>

使用VNode ​

与上述使用方法类似

vue
<template>
  <div class="p-4 space-y-4 mx-auto min-w-md">
    <div class="grid grid-rows-2 grid-cols-3 gap-5">
      <button class="btn" @click="showNotification('top-start')">Top Start</button>
      <button class="btn" @click="showNotification('top-center')">Top Center</button>
      <button class="btn" @click="showNotification('top-end')">Top End</button>
      <button class="btn" @click="showNotification('bottom-start')">Bottom Start</button>
      <div class="select-none" tabindex="0"></div>
      <button class="btn" @click="showNotification('bottom-end')">Bottom End</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Queue, type QueuePosition } from 'li-daisy'
import { h } from 'vue'

const showNotification = (position: QueuePosition) => {
  const hVnode = h(
    'div',
    { class: 'space-y-2 bg-base-100 p-4 border-2 border-base-300 rounded-md shadow-md' },
    [
      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'),
      ]),
    ]
  )

  Queue.addVnode(hVnode, {
    position: position,
    onClose: () => console.log('close callback'),
  })
}
</script>

自动关闭 ​

通过设置 options 的 autoClose 来控制消息是否自动关闭

vue
<template>
  <div class="p-4 space-y-4 mx-auto min-w-md">
    <div class="grid grid-rows-2 grid-cols-3 gap-5">
      <button class="btn" @click="showNotification('top-start')">Top Start</button>
      <button class="btn" @click="showNotification('top-center')">Top Center</button>
      <button class="btn" @click="showNotification('top-end')">Top End</button>
      <button class="btn" @click="showNotification('bottom-start')">Bottom Start</button>
      <div class="select-none" tabindex="0"></div>
      <button class="btn" @click="showNotification('bottom-end')">Bottom End</button>
    </div>
  </div>
</template>

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

import component from './toast.vue'
import type { ToastProps } from './toast.vue'

const showNotification = (position: QueuePosition) => {
  Queue.addComponent(
    component,
    {
      title: '操作成功',
      message: `消息显示在 ${position} 位置`,
    } as ToastProps,
    {
      position: position,
      autoClose: false,
      onClose: () => console.log('close callback'),
    }
  )
}
</script>

API ​

queue.addComponent(component,props, options) ​

添加一个组件到队列中

参数：

  • component - Vue 组件 (Component)
  • props 组件对应的props (extends Record<string, any>)
  • options - QueueItemOptions 配置选项

Options：

参数类型默认值说明
positionQueuePosition'top-end'消息显示位置
durationnumber-自动消失时间（毫秒）低于1000无效
onClose() => void-消息关闭时的回调函数
autoClosebooleantrue是否自动关闭消息

返回值： string - 消息的唯一 ID

queue.remove(id) ​

手动移除指定的消息

queue.setStaggerDelay(delay) ​

设置消息错开关闭的延迟时间，用于优化体验，默认值为 400ms，只能设置一次，重复调用会抛出错误

位置类型 ​

QueuePosition 支持以下位置：

  • 'top-start' - 左上角
  • 'top-center' - 顶部居中
  • 'top-end' - 右上角
  • 'bottom-start' - 左下角
  • 'bottom-end' - 右下角