Li-Daisy

Appearance

Message 消息条 ​

用于轻量级的消息提示

类型 ​

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

plain 可设置消息是否取消背景色

无背景信息条

有背景信息条

vue
<template>
  <div class="flex flex-col gap-y-5 w-auto">
    <p class="mx-auto">无背景信息条</p>
    <div class="flex gap-x-3 flex-nowrap mx-auto">
      <button class="btn" @click="toastFunc('primary', true)">primary</button>
      <button class="btn" @click="toastFunc('info', true)">info</button>
      <button class="btn" @click="toastFunc('success', true)">success</button>
      <button class="btn" @click="toastFunc('warning', true)">warn</button>
      <button class="btn" @click="toastFunc('error', true)">error</button>
    </div>
    <p class="mx-auto text-primary">有背景信息条</p>
    <div class="flex gap-x-3 flex-nowrap mx-auto">
      <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>
  </div>
</template>

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

const toastFunc = (type: MessageType, plain?: boolean) => {
  const options = {
    plain: false,
  }
  if (plain) {
    options.plain = true
  }

  switch (type) {
    case 'primary':
      return Message.primary(`这是一条 ${type} 消息`, {
        ...options,
      })
    case 'info':
      return Message.info(`这是一条 ${type} 消息`, {
        ...options,
      })
    case 'success':
      return Message.success(`这是一条 ${type} 消息`, {
        ...options,
      })
    case 'warning':
      return Message.warning(`这是一条 ${type} 消息`, {
        ...options,
      })
    case 'error':
      return Message.error(`这是一条 ${type} 消息`, {
        ...options,
      })
  }
}
</script>

关闭图标 ​

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

vue
<template>
  <div class="space-x-3">
    <button class="btn" @click="toastFunc">此消息条无关闭图标</button>
  </div>
</template>

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

const toastFunc = () => {
  Message.info('这条消息无关闭图标', {
    showCloseIcon: false,
    // 此时即使设置了autoClose为false 该消息依旧会自动关闭
    autoClose: false,
  })
}
</script>

Vnode ​

message 参数也可为 Vnode

vue
<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 { Message } from 'li-daisy'

const vnodeNotification = () => {
  Message.info(h('span', { style: 'color: #16a34a;' }, '这是VNode消息内容'))
}
</script>

API ​

配置项 ​

参数类型默认值说明
message[string,Vnode]-消息内容
以下为options配置
typeNotificationType'info'消息类型
plainbooleanfalse是否取消背景色
durationnumber2000自动消失时间（毫秒）低于1000无效
autoClosebooleantrue是否自动关闭
showCloseIconbooleanfalse是否显示右侧关闭图标