Alert 警告
代码演示
成功的提示内容
警告的提示内容
错误的提示内容
普通的提示内容
基础用法
组件的type属性的可选值有成功(success)、 警告(warning)、 错误(error)、 普通(info) 等, 可供不同场景选择使用。
查看代码 < />
<template>
<w-alert title="成功的提示内容" type="success"></w-alert>
<w-alert title="警告的提示内容" type="warning"></w-alert>
<w-alert title="错误的提示内容" type="error"></w-alert>
<w-alert title="普通的提示内容" type="info"></w-alert>
</template>成功的提示内容
警告的提示内容
错误的提示内容
普通的提示内容
图标显示
为组件添加 show-icon 属性即可为不同type的alert提供相应的icon, 丰富提示内容。
查看代码 < />
<template>
<w-alert show-icon title="成功的提示内容" type="success"></w-alert>
<w-alert show-icon title="警告的提示内容" type="warning"></w-alert>
<w-alert show-icon title="错误的提示内容" type="error"></w-alert>
<w-alert show-icon title="普通的提示内容" type="info"></w-alert>
</template>通知标题
这是一段描述性内容, 也许是一段报告详细内容...
通知标题
这是一段描述性内容, 也许是一段报告详细内容...
添加描述内容
通过description属性，可以添加描述性的内容。
查看代码 < />
<template>
<w-alert :bold-title="true" title="通知标题" type="success"
description="这是一段描述性内容, 也许是一段报告详细内容..."></w-alert>
<w-alert :bold-title="true" showIcon title="通知标题" type="error"
description="这是一段描述性内容, 也许是一段报告详细内容..."></w-alert>
</template>文本内容作为关闭按钮
关闭关闭回调函数
隐藏关闭按钮
自定义关闭按钮
组件的 closable 属性即默认为true, 可激活alert的删除按钮. 以下实例也可以自定义关闭按钮。
查看代码 < />
<template>
<w-alert close-text="关闭" title="文本内容作为关闭按钮" type="success"></w-alert>
<w-alert title="关闭回调函数" type="warning" @close="handleClose"></w-alert>
<w-alert :closable="false" title="隐藏关闭按钮" type="info"></w-alert>
</template>
<script>
export default {
methods: {
handleClose () {
alert('关闭了!')
}
}
}
</script>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| closable | 是否可关闭 | Boolean | — | true | |
| close-text | 文本关闭按钮 | String | — | — | |
| show-icon | 是否显示图标 | Boolean | — | false | |
| title | 标题 | String | — | — | |
| type | 提示类型 | String | success / warning / info / error | info |
Events
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| close | 关闭alert时触发的事件 | — |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |