# Alert 警告提示 
警告提示,展现需要关注的信息。
# 使用场景
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
# 平台兼容性
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
# 基本使用
- 通过
title和description属性设置组件的标题和描述内容 - 通过
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 | 字体大小,单位rpx或px | String | Number | 14 | - |
| customStyle | 自定义外部样式 | Object | - | - |
# Alert Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击组件时触发 | - |