# Alert 警告提示

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

# 使用场景

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

# 平台兼容性

App(vue) App(nvue) H5 小程序 VUE2 VUE3

# 基本使用

  • 通过titledescription属性设置组件的标题和描述内容
  • 通过type属性设置主题类型,有primary,success,error,warning,info可选值
  • 通过effect属性设置主题浅或深色调,有light(浅色 默认),dark(深色)可选值
<uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架"></uv-alert>

# 图标

通过showIcon设置是否显示图标,作用是让信息类型更加醒目。

注意:当前版本图标为uv-ui内置图标,根据type参数显示不同的图标,无法自定义。

<uv-alert type="warning" :show-icon="true"></uv-alert>

# 可关闭的警告提示

通过closable属性配置是否可关闭。显示关闭按钮,点击可关闭警告提示。

<uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架" closable></uv-alert>

# 完整示例

# API


# Alert Props

参数 说明 类型 默认值 可选值
title 显示的文字 String - -
type 使用预设的颜色 String warning warning | success | primary | error | info
description 辅助性文字,颜色比title浅一点,字号也小一点,可选 String - -
closable 关闭按钮(默认为叉号icon图标) Boolean false true | false
showIcon 是否显示左边的辅助图标 Boolean false true | false
effect 多图时,图片缩放裁剪的模式 String light(浅色) dark(深色) | light(浅色)
center 文字是否居中 Boolean false true | false
fontSize 字体大小,单位rpxpx String | Number 14 -
customStyle 自定义外部样式 Object - -

# Alert Events

事件名 说明 回调参数
@click 点击组件时触发 -