Alert 提示
用于页面中展示重要的提示信息。Alert 组件可以根据不同类型、主题和是否可关闭的需求进行定制。
基础用法
通过设置 type
属性来指定提示类型,支持四种类型:success
、warning
、danger
、info
。默认类型为 info
。
this is the alert
this is the alert
this is the alert
this is the alert
<template>
<div class="basic block">
<l-alert type="success">this is the alert</l-alert>
<l-alert type="warning">this is the alert</l-alert>
<l-alert type="info">this is the alert</l-alert>
<l-alert type="danger">this is the alert</l-alert>
</div>
</template>
主题
Alert 组件支持两种主题:light
和 dark
。通过 effect
属性控制主题风格,默认值为 light
。
this is the alert
this is the alert
this is the alert
this is the alert
<template>
<div class="basic block">
<l-alert type="success" effect="dark">this is the alert</l-alert>
<l-alert type="warning" effect="dark">this is the alert</l-alert>
<l-alert type="info" effect="dark">this is the alert</l-alert>
<l-alert type="danger" effect="dark">this is the alert</l-alert>
</div>
</template>
不可关闭
通过设置 closable
属性控制 Alert 组件是否可关闭。该属性接受一个布尔值,默认为 false
,表示不可关闭。
without close
<template>
<div class="basic block">
<l-alert type="success" :closable="false">without close</l-alert>
</div>
</template>
Alert Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | Alert 类型 | 'success'| 'warning'| 'danger'| 'info' | info |
effect | 主题样式 | 'light'| 'dark' | light |
closable | 是否可关闭 | boolean | false |