X-Next

Appearance

Alert 警告提示 ​

用于展示页面内的重要提示、状态说明或操作反馈。

何时使用 ​

  • 页面中有需要用户注意的静态提示、状态说明或操作反馈。
  • 提示不需要自动消失，或希望用户手动关闭。
  • 需要在顶部公告、表单说明、结果反馈等场景中保持内容可见。

基础用法 ​

vue
<template>
  <x-alert type="info" title="提示">这是一条提示信息。</x-alert>
  <x-alert type="success">保存成功，配置已生效。</x-alert>
</template>

类型 ​

vue
<template>
  <x-alert type="info">用于普通信息提示。</x-alert>
  <x-alert type="success">用于成功状态反馈。</x-alert>
  <x-alert type="warning">用于需要关注的警告信息。</x-alert>
  <x-alert type="error">用于错误或失败信息。</x-alert>
  <x-alert type="normal">用于弱提示或中性说明。</x-alert>
</template>

标题 ​

vue
<template>
  <x-alert type="info" title="系统提示">维护窗口为今天 22:00 至 23:00。</x-alert>
  <x-alert type="warning">
    <template #title>容量不足</template>
    当前空间即将用尽，请及时清理。
  </x-alert>
</template>

可关闭 ​

close：0 次，after-close：0 次
vue
<template>
  <x-button size="small" @click="reset">重新显示</x-button>
  <x-alert
    :key="alertKey"
    closable
    type="success"
    @close="handleClose"
    @after-close="handleAfterClose"
  >
    保存成功，点击关闭按钮后会触发关闭事件。
  </x-alert>
  <div>close：{{ closeCount }} 次，after-close：{{ afterCloseCount }} 次</div>
</template>

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

const alertKey = ref(0);
const closeCount = ref(0);
const afterCloseCount = ref(0);

const handleClose = () => {
  closeCount.value += 1;
};

const handleAfterClose = () => {
  afterCloseCount.value += 1;
};

const reset = () => {
  alertKey.value += 1;
};
</script>

受控显示 ​

vue
<template>
  <x-button size="small" @click="visible = true">显示提示</x-button>
  <x-alert v-model:visible="visible" closable type="info">
    通过 v-model:visible 控制显示状态，关闭后可由外部重新显示。
  </x-alert>
</template>

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

const visible = ref(true);
</script>

隐藏图标 ​

vue
<template>
  <x-alert :show-icon="false" type="info">隐藏信息提示的默认图标。</x-alert>
  <x-alert :show-icon="false" type="warning" title="无图标标题">
    标题和正文布局仍然保持可读。
  </x-alert>
</template>

自定义图标和关闭元素 ​

vue
<template>
  <x-alert type="warning">
    <template #icon>
      <span class="custom-icon">!</span>
    </template>
    自定义图标会替换默认状态图标。
  </x-alert>

  <x-alert closable type="info">
    <template #close-element>知道了</template>
    可以通过 close-element 插槽替换关闭按钮内容。
  </x-alert>

  <x-alert type="normal">
    <template #icon>
      <span class="custom-icon">i</span>
    </template>
    normal 类型默认不显示图标；传入 icon 插槽后会显示自定义图标。
  </x-alert>
</template>

操作区 ​

vue
<template>
  <x-alert type="warning" title="容量不足" closable>
    当前空间即将用尽，请及时清理。
    <template #action>
      <x-button size="small" type="primary">去处理</x-button>
    </template>
  </x-alert>

  <x-alert type="info">
    有新的配置建议可查看。
    <template #action>
      <x-button size="small" type="text">查看详情</x-button>
    </template>
  </x-alert>
</template>

顶部公告 ​

vue
<template>
  <x-alert banner center>这是居中的顶部公告。</x-alert>
  <x-alert banner type="warning">banner 只改变边框和圆角，不会自动改变提示类型。</x-alert>
</template>

交互说明 ​

  • Alert 是页面内静态提示，不会自动消失。
  • 未传 visible 时，Alert 使用内部状态；closable 关闭后当前实例会隐藏。
  • 传入 visible 或使用 v-model:visible 时，显示状态由外部控制，关闭会触发 update:visible=false。
  • close-element 只替换关闭按钮内容，关闭事件仍由外层关闭按钮承载。
  • normal 类型默认不显示图标；如需图标，请使用 icon 插槽。

按需导入 ​

ts
import { Alert } from 'x-next';

Props ​

参数说明类型默认值
type提示类型'info' | 'success' | 'warning' | 'error' | 'normal''info'
showIcon是否显示图标；normal 类型无自定义图标时默认不显示图标区域booleantrue
closable是否可关闭booleanfalse
title标题内容string-
banner是否为顶部公告样式，会去除边框和圆角booleanfalse
center内容是否居中booleanfalse
visible是否显示，支持 v-model:visiblebooleanundefined
defaultVisible非受控模式下默认是否显示booleantrue

Events ​

事件名说明回调参数
close点击关闭按钮时触发event: MouseEvent
update:visible显示状态变化时触发visible: boolean
after-close关闭动画结束后触发-

Slots ​

插槽名说明
default提示正文
title自定义标题
icon自定义图标，showIcon=false 时不渲染
action自定义操作区
close-element自定义关闭按钮内容