Alert 警告提示

警告提示，展现需要关注的信息。

何时使用

当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

导入

import { Alert } from "@reglow/reui";

代码演示

基础用法

最简单的用法，适用于简短的警告提示。

<script setup>
import { Alert } from "@reglow/reui";
</script>

<template>
  <Alert title="Success Text" type="success" />
</template>

四种样式

共有四种样式 success、info、warning、error。

<script setup>
import { Alert } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert title="Success Text" type="success" />
    <Alert title="Info Text" type="info" />
    <Alert title="Warning Text" type="warning" />
    <Alert title="Error Text" type="error" />
  </div>
</template>

无边框

通过 variant="filled" 隐藏边框。

<script setup>
import { Alert } from "@reglow/reui";
</script>

<template>
  <Alert title="Info Text" type="info" variant="filled" />
</template>

可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

<script setup>
import { Alert } from "@reglow/reui";

const onClose = (e) => {
  console.log(e, "I was closed.");
};
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert title="Warning Title" type="warning" closable @close="onClose" />
    <Alert title="Success Title" type="success" closable @close="onClose" />
    <Alert title="Info Title" type="info" closable @close="onClose" />
    <Alert title="Error Title" type="error" closable @close="onClose" />
  </div>
</template>

含有辅助性文字介绍

含有辅助性文字介绍的警告提示。

<script setup>
import { Alert } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert
      title="Success Text"
      description="Success Description Success Description Success Description"
      type="success"
    />
    <Alert
      title="Info Text"
      description="Info Description Info Description Info Description Info Description"
      type="info"
    />
    <Alert
      title="Warning Text"
      description="Warning Description Warning Description Warning Description Warning Description"
      type="warning"
    />
    <Alert
      title="Error Text"
      description="Error Description Error Description Error Description Error Description"
      type="error"
    />
  </div>
</template>

图标

可口的图标让信息类型更加醒目。

<script setup>
import { Alert } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert title="Success Tips" type="success" show-icon />
    <Alert title="Informational Notes" type="info" show-icon />
    <Alert title="Warning" type="warning" show-icon closable />
    <Alert title="Error" type="error" show-icon />
    <Alert
      title="Success Tips"
      description="Detailed description and advice about successful copywriting."
      type="success"
      show-icon
    />
    <Alert
      title="Informational Notes"
      description="Additional description and information about copywriting."
      type="info"
      show-icon
    />
    <Alert
      title="Warning"
      description="This is a warning notice about copywriting."
      type="warning"
      show-icon
      closable
    />
    <Alert
      title="Error"
      description="This is an error message about copywriting."
      type="error"
      show-icon
    />
  </div>
</template>

顶部公告

页面顶部通告形式，默认有图标且 type 为 warning。

<script setup>
import { Alert } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert title="Warning text" banner />
    <Alert
      title="Very long warning text warning text text text text text text text"
      banner
      closable
    />
    <Alert :show-icon="false" title="Warning text without icon" banner />
    <Alert type="error" title="Error text" banner />
  </div>
</template>

操作

可以在右上角自定义操作项。

<script setup>
import { Alert } from "@reglow/reui";
import { Button } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert title="Success Tips" type="success" show-icon closable>
      <template #action>
        <Button size="sm" variant="ghost">UNDO</Button>
      </template>
    </Alert>
    <Alert
      title="Error Text"
      description="Error Description Error Description Error Description Error Description"
      type="error"
      show-icon
    >
      <template #action>
        <Button size="sm" variant="destructive">Detail</Button>
      </template>
    </Alert>
    <Alert title="Warning Text" type="warning" closable>
      <template #action>
        <Button size="sm" variant="ghost">Done</Button>
      </template>
    </Alert>
    <Alert
      title="Info Text"
      description="Info Description Info Description Info Description Info Description"
      type="info"
      closable
    >
      <template #action>
        <div class="flex flex-col gap-1">
          <Button size="sm">Accept</Button>
          <Button size="sm" variant="destructive">Decline</Button>
        </div>
      </template>
    </Alert>
  </div>
</template>

自定义图标

通过 #icon 插槽自定义图标。

<script setup>
import { Alert } from "@reglow/reui";
import { Heart } from "lucide-vue-next";
</script>

<template>
  <Alert title="Custom Icon" type="info" show-icon>
    <template #icon>
      <Heart class="size-4 text-pink-500" />
    </template>
  </Alert>
</template>

自定义关闭图标

通过 #closeIcon 插槽自定义关闭图标。

<script setup>
import { Alert } from "@reglow/reui";
import { ArrowRight } from "lucide-vue-next";
</script>

<template>
  <Alert title="Closable" type="info" closable>
    <template #closeIcon>
      <ArrowRight class="size-3.5" />
    </template>
  </Alert>
</template>

平滑地卸载

平滑、自然的卸载提示。

<script setup>
import { ref } from "vue";
import { Alert } from "@reglow/reui";
import { Switch } from "@reglow/reui";

const visible = ref(true);

const handleClose = () => {
  visible.value = false;
};
</script>

<template>
  <div class="flex flex-col gap-3">
    <Alert
      v-if="visible"
      title="Alert Message Text"
      type="success"
      closable
      @after-close="handleClose"
    />
    <p>click the close button to see the effect</p>
    <Switch
      :model-value="visible"
      @update:model-value="visible = $event"
      :disabled="visible"
    />
  </div>
</template>

API

Props

参数	说明	类型	默认值
title	警告提示内容	`string`	-
description	警告提示的辅助性文字介绍	`string`	-
type	指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`	`'success' \| 'info' \| 'warning' \| 'error'`	`'info'`，`banner` 模式下默认为 `'warning'`
showIcon	是否显示辅助图标	`boolean`	`false`，`banner` 模式下默认为 `true`
banner	是否用作顶部公告	`boolean`	`false`
variant	警告提示样式变体	`'outlined' \| 'filled'`	`'outlined'`
closable	是否可关闭	`boolean`	`false`
class	附加类名	`string`	-

Events

事件名	说明	参数
close	关闭时触发的回调函数	`(e: MouseEvent) => void`
afterClose	关闭动画结束后触发的回调函数	`() => void`

Slots

插槽名	说明	参数
default	默认插槽，当未设置 description 时作为辅助文字	-
title	警告提示内容（优先级高于 prop）	-
description	辅助性文字介绍（优先级高于 prop）	-
icon	自定义图标，`showIcon` 为 true 时有效	-
action	自定义操作项	-
closeIcon	自定义关闭图标	-

内容锚点

何时使用
导入
代码演示
API