dk-plusAlert 警示提示
介绍
DkAlert 用于警告提示，展现需要关注的信息。
基础用法
组件提供四种类型，由 type 属性指定，默认值为 info。
info alert
success alert
warning alert
error alert
html
<dk-alert>info alert</dk-alert>
<dk-alert type="success">success alert</dk-alert>
<dk-alert type="warning">warning alert</dk-alert>
<dk-alert type="error">error alert</dk-alert>展开
icon
icon 用来自定义设置前置图标，closeIcon用来自定义设置关闭图标。
dk-plus-alert
dk-plus-alert
html
<dk-alert :icon="'IconSysInformation'">dk-plus-alert</dk-alert>
<dk-alert :closeIcon="'IconCollectActive'">dk-plus-alert</dk-alert>展开
文字居中
使用 center 属性来让文字水平居中。
dk-plus-alert
html
<dk-alert :icon="'IconSysInformation'" center>dk-plus-alert </dk-alert>展开
文字描述
description 为 Alert 组件添加一个更加详细的描述来使用户了解更多信息,除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。 辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。
dk-plus-alert
dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description...
html
<dk-alert
:icon="'IconSysInformation'"
description="dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description,dk-plus-alert-description..."
>
dk-plus-alert
</dk-alert>展开
关闭事件
onclose 为 Alert 组件关闭时触发的回调函数。
dk-plus-alert
html
<dk-alert :icon="'IconSysInformation'" @close="handleClose">dk-plus-alert </dk-alert>
const handleClose = (): void => {
console.log('关闭了')
}展开
API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 指定警告提示的样式 | String | success、info、warning、error | info |
| icon、closeIcon | 前置提示图标、关闭图标 | String | — | — |
| center | 文字是否居中 | Boolean | — | false |
| description | 描述性文本 | String | — | — |
| close | 关闭 Alert 时触发的事件 | (e: MouseEvent) => void | — | — |
Contributors
