Alert 提示

用于页面中展示重要的提示信息。

import { Alert as ElAlert } from '@szhn/dh-design-pc'

基础用法

Alert 组件不属于浮层元素，不会自动消失或关闭。提供 5 种类型，由 type 属性指定，默认值为 info。

<template>
  <div class="demo-alert">
    <el-alert title="成功提示的文案" type="success" />
    <el-alert title="消息提示的文案" type="info" />
    <el-alert title="警告提示的文案" type="warning" />
    <el-alert title="错误提示的文案" type="error" />
    <el-alert title="主要提示的文案" type="primary" />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

主题

Alert 提供了 light 和 dark 两种主题，通过 effect 属性切换。

<template>
  <div class="demo-alert">
    <el-alert title="成功提示的文案" type="success" effect="dark" />
    <el-alert title="消息提示的文案" type="info" effect="dark" />
    <el-alert title="警告提示的文案" type="warning" effect="dark" />
    <el-alert title="错误提示的文案" type="error" effect="dark" />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

自定义关闭按钮

可以通过 closable 控制 Alert 是否可关闭，close-text 用来自定义关闭按钮文本，关闭时触发 close 事件。

<template>
  <div class="demo-alert">
    <el-alert title="不可关闭" type="success" :closable="false" />
    <el-alert title="自定义关闭文案" type="info" close-text="知道了" />
    <el-alert title="监听关闭事件" type="warning" @close="onClose" />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'


function onClose() {
  console.log('Alert 已关闭')
}
</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

使用图标

通过 show-icon 属性展示类型对应的图标，使提示信息更易识别。

<template>
  <div class="demo-alert">
    <el-alert title="成功提示" type="success" show-icon />
    <el-alert title="消息提示" type="info" show-icon />
    <el-alert title="警告提示" type="warning" show-icon />
    <el-alert title="错误提示" type="error" show-icon />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

文字居中

使用 center 属性使文字水平居中。

<template>
  <div class="demo-alert">
    <el-alert title="居中的成功提示" type="success" center show-icon />
    <el-alert title="居中的警告提示" type="warning" center show-icon />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

文字描述

通过 description 属性添加辅助性描述，可以让用户了解更多信息。

<template>
  <div class="demo-alert">
    <el-alert
      title="带描述信息的提示"
      type="success"
      description="这是一段辅助文字，用来对标题进行更详细的说明，超出长度时会自动换行。"
    />
    <el-alert
      title="警告"
      type="warning"
      description="请核对您填写的信息后再继续。"
    />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

带图标和描述

同时配合 show-icon 和 description，可以获得信息量更完整的提示。

<template>
  <div class="demo-alert">
    <el-alert
      title="成功的提示"
      type="success"
      description="操作已成功，您可以继续后续动作。"
      show-icon
    />
    <el-alert
      title="错误的提示"
      type="error"
      description="操作未能完成，请重试或联系管理员。"
      show-icon
    />
  </div>
</template>

<script lang="ts" setup>
import { Alert as ElAlert } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-alert {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

API

属性

名称	说明	类型	默认值
title	标题	string	—
type	类型	success / warning / info / error / primary	info
description	描述性文本	string	—
closable	是否可以关闭	boolean	true
center	文字是否居中	boolean	false
close-text	自定义关闭按钮文本	string	—
show-icon	是否显示类型图标	boolean	false
effect	主题样式	light / dark	light

事件

名称	说明
close	关闭 Alert 时触发

插槽

名称	说明
default	Alert 内容描述
title	标题的内容
icon	图标的内容

更多配置参见 Element Plus Alert。