Lzh on GitHub

Alert

GitHub
用于吸引用户注意力的提示框。

用法

标题 (Title)

使用 title 属性设置提示框的标题。

Heads up!
<template>
  <UAlert title="Heads up!" />
</template>

描述 (Description)

使用 description 属性设置提示框的描述。

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert title="Heads up!" description="You can change the primary color in your app config." />
</template>

图标 (Icon)

使用 icon 属性显示一个 Icon。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert title="Heads up!" description="您可以在应用配置中更改主色。" icon="i-lucide-terminal" />
</template>

头像 (Avatar)

使用 avatar 属性显示一个 Avatar。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色。"
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
  />
</template>

颜色 (Color)

使用 color 属性更改提示框的颜色。

Heads up!
您可以在应用配置中更改主色(primary)。
<template>
  <UAlert
    color="neutral"
    title="Heads up!"
    description="您可以在应用配置中更改主色(primary)。"
    icon="i-lucide-terminal"
  />
</template>

变体 (Variant)

使用 variant 属性更改提示框的变体。

Heads up!
您可以在应用配置中更改主色(primary)。
<template>
  <UAlert
    color="neutral"
    variant="subtle"
    title="Heads up!"
    description="您可以在应用配置中更改主色(primary)。"
    icon="i-lucide-terminal"
  />
</template>

关闭 (Close)

使用 close 属性显示一个 Button 来关闭提示框。

点击关闭按钮时，将发出 update:open 事件。
Heads up!
您可以在应用配置中更改主色(primary)。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色(primary)。"
    color="neutral"
    variant="outline"
    close
  />
</template>

您可以传递 Button 组件的任何属性来定制它。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色。"
    color="neutral"
    variant="outline"
    :close="{
      color: 'primary',
      variant: 'outline',
      class: 'rounded-full'
    }"
  />
</template>

关闭图标 (Close Icon)

使用 close-icon 属性自定义关闭按钮的 Icon。默认为 i-lucide-x。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色。"
    color="neutral"
    variant="outline"
    close
    close-icon="i-lucide-arrow-right"
  />
</template>
您可以在 app.config.ts 中的 ui.icons.close 键下全局自定义此图标。
您可以在 vite.config.ts 中的 ui.icons.close 键下全局自定义此图标。

操作 (Actions)

使用 actions 属性向提示框添加一些 Button 操作。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色。"
    color="neutral"
    variant="outline"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

方向 (Orientation)

使用 orientation 属性更改提示框的方向。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色。"
    color="neutral"
    variant="outline"
    orientation="horizontal"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

示例

actions prop

actions 接受一个 按钮配置对象数组，每个对象支持 UButton 的所有属性：

<script setup lang="ts">
const handleAsyncAction = async () => {
  // const data = await fetchData()
  // showToast(`加载完成: ${data.length} 条记录`)
  alert('点击动作按钮')
}
</script>

<template>
  <UAlert
    title="数据同步",
    color="secondary"
    :actions="[
      {
        label: '立即同步',
        loadingIcon: 'i-heroicons-arrow-path',
        onClick: handleAsyncAction, // 注意：在 v-bind 中，事件监听器需要使用 'onEventName' 的驼峰命名约定
        loading: false // 可动态控制加载状态
      }
    ]"
  />
</template>

class prop

使用 class prop 覆盖提示框的基本样式。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert title="Heads up!" description="您可以在应用配置中更改主色。" class="rounded-none" />
</template>

ui prop

使用 ui prop 覆盖提示框插槽的样式。

Heads up!
您可以在应用配置中更改主色。
<template>
  <UAlert
    title="Heads up!"
    description="您可以在应用配置中更改主色。"
    icon="i-lucide-rocket"
    :ui="{
      icon: 'size-11'
    }"
  />
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

title

string

description

string

icon

string

avatar

AvatarProps

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'solid'

"solid" | "outline" | "soft" | "subtle"

orientation

'vertical'

"horizontal" | "vertical"

The orientation between the content and the actions.

actions

ButtonProps[]

Display a list of actions:

  • under the title and description when orientation is vertical
  • next to the close button when orientation is horizontal{ size: 'xs' }
close

false

boolean | Partial<ButtonProps>

Display a close button to dismiss the alert. { size: 'md', color: 'neutral', variant: 'link' }

closeIcon

appConfig.ui.icons.close

string

The icon displayed in the close button.

ui

{ root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; }

Slots

Slot Type
leading

{}

title

{}

description

{}

actions

{}

close

{ ui: { root: (props?: Record<string, any> | undefined) => string; wrapper: (props?: Record<string, any> | undefined) => string; title: (props?: Record<string, any> | undefined) => string; ... 5 more ...; close: (props?: Record<...> | undefined) => string; }; }

Emits

Event Type
update:open

[value: boolean]

使用示例

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

const showAlert = ref(true)
</script>

<template>
  <!-- 用 v-if 控制组件显示 -->
  <UAlert
    v-if="showAlert"
    title="提示"
    description="这是一个警告提示框"
    color="warning"
    variant="solid"
    close
    @update:open="showAlert = false"
  />
</template>

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    alert: {
      slots: {
        root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
        wrapper: 'min-w-0 flex-1 flex flex-col',
        title: 'text-sm font-medium',
        description: 'text-sm opacity-90',
        icon: 'shrink-0 size-5',
        avatar: 'shrink-0',
        avatarSize: '2xl',
        actions: 'flex flex-wrap gap-1.5 shrink-0',
        close: 'p-0'
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-start',
            actions: 'items-start mt-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: {
            root: 'bg-primary text-inverted'
          }
        },
        {
          color: 'primary',
          variant: 'outline',
          class: {
            root: 'text-primary ring ring-inset ring-primary/25'
          }
        },
        {
          color: 'primary',
          variant: 'soft',
          class: {
            root: 'bg-primary/10 text-primary'
          }
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: {
            root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
          }
        },
        {
          color: 'neutral',
          variant: 'solid',
          class: {
            root: 'text-inverted bg-inverted'
          }
        },
        {
          color: 'neutral',
          variant: 'outline',
          class: {
            root: 'text-highlighted bg-default ring ring-inset ring-default'
          }
        },
        {
          color: 'neutral',
          variant: 'soft',
          class: {
            root: 'text-highlighted bg-elevated/50'
          }
        },
        {
          color: 'neutral',
          variant: 'subtle',
          class: {
            root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'solid'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        alert: {
          slots: {
            root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
            wrapper: 'min-w-0 flex-1 flex flex-col',
            title: 'text-sm font-medium',
            description: 'text-sm opacity-90',
            icon: 'shrink-0 size-5',
            avatar: 'shrink-0',
            avatarSize: '2xl',
            actions: 'flex flex-wrap gap-1.5 shrink-0',
            close: 'p-0'
          },
          variants: {
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              solid: '',
              outline: '',
              soft: '',
              subtle: ''
            },
            orientation: {
              horizontal: {
                root: 'items-center',
                actions: 'items-center'
              },
              vertical: {
                root: 'items-start',
                actions: 'items-start mt-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: {
                root: 'bg-primary text-inverted'
              }
            },
            {
              color: 'primary',
              variant: 'outline',
              class: {
                root: 'text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'primary',
              variant: 'soft',
              class: {
                root: 'bg-primary/10 text-primary'
              }
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: {
                root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'neutral',
              variant: 'solid',
              class: {
                root: 'text-inverted bg-inverted'
              }
            },
            {
              color: 'neutral',
              variant: 'outline',
              class: {
                root: 'text-highlighted bg-default ring ring-inset ring-default'
              }
            },
            {
              color: 'neutral',
              variant: 'soft',
              class: {
                root: 'text-highlighted bg-elevated/50'
              }
            },
            {
              color: 'neutral',
              variant: 'subtle',
              class: {
                root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
              }
            }
          ],
          defaultVariants: {
            color: 'primary',
            variant: 'solid'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        alert: {
          slots: {
            root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
            wrapper: 'min-w-0 flex-1 flex flex-col',
            title: 'text-sm font-medium',
            description: 'text-sm opacity-90',
            icon: 'shrink-0 size-5',
            avatar: 'shrink-0',
            avatarSize: '2xl',
            actions: 'flex flex-wrap gap-1.5 shrink-0',
            close: 'p-0'
          },
          variants: {
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              solid: '',
              outline: '',
              soft: '',
              subtle: ''
            },
            orientation: {
              horizontal: {
                root: 'items-center',
                actions: 'items-center'
              },
              vertical: {
                root: 'items-start',
                actions: 'items-start mt-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: {
                root: 'bg-primary text-inverted'
              }
            },
            {
              color: 'primary',
              variant: 'outline',
              class: {
                root: 'text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'primary',
              variant: 'soft',
              class: {
                root: 'bg-primary/10 text-primary'
              }
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: {
                root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'neutral',
              variant: 'solid',
              class: {
                root: 'text-inverted bg-inverted'
              }
            },
            {
              color: 'neutral',
              variant: 'outline',
              class: {
                root: 'text-highlighted bg-default ring ring-inset ring-default'
              }
            },
            {
              color: 'neutral',
              variant: 'soft',
              class: {
                root: 'text-highlighted bg-elevated/50'
              }
            },
            {
              color: 'neutral',
              variant: 'subtle',
              class: {
                root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
              }
            }
          ],
          defaultVariants: {
            color: 'primary',
            variant: 'solid'
          }
        }
      }
    })
  ]
})
为了可读性，compoundVariants 中的某些颜色被省略。请查看 GitHub 上的源代码。

根据 Alert.vue 的 ui 计算结果进行配置

Alert.vue 的 ui 计算属性接收以下四个参数来计算变体：

  • color: props.color
  • variant: props.variant
  • orientation: props.orientation
  • title: !!props.title || !!slots.title (这是一个布尔值)

这意味着你可以在 app.config.ts 中为 UAlert 组件配置这些 prop 对应的 variants。

Accordion

一组可折叠面板的堆叠。

Avatar

一个带回退功能和 Nuxt Image 支持的 img 元素。