ui-alert 提示框组件

版本：v2.3.11

提示框组件用于显示警告、成功、错误等类型的提示信息

基本使用

<template>
  <div class="alert-demo">
    <ui-alert type="success" message="操作成功 " />
    <ui-alert type="warning" message="警告信息 " />
    <ui-alert type="danger" message="错误信息 " />
    <ui-alert type="info" message="提示信息 " />
  </div>
</template>

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

Props

参数	类型	默认值	说明
type	String	'info'	提示框组件类型，可选值：success、warning、danger、info
message	String	-	提示信息内容
title	String	-	提示框组件标
closable	Boolean	false	是否可关
duration	Number	3000	自动关闭时间，单位：毫秒

Events

事件	说明	回调参数
close	关闭提示框组件时触发	-

Slots

名称	说明
default	自定义内容，优先级高message 属
title	自定义标题，优先级高title 属

示例

带标题的提示

<template>
  <ui-alert type="success" title="成功提示" message="操作成功 " />
</template>

可关闭的提示

<template>
  <ui-alert type="warning" message="这是一个可关闭的提示框组件" closable />
</template>

自定义内容的提示

<template>
  <ui-alert type="danger">
    <template #title>错误提示</template>
    <div>这是一个带有自定义内容的错误提示框组件a href="#">点击查看详情</a></div>
  </ui-alert>
</template>

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/alert/alert