Skip to content

Alert 提示

用于页面中展示重要的提示信息。Alert 组件可以根据不同类型、主题和是否可关闭的需求进行定制。

基础用法

通过设置 type 属性来指定提示类型,支持四种类型:successwarningdangerinfo。默认类型为 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 组件支持两种主题:lightdark。通过 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

属性名说明类型默认值
typeAlert 类型'success'| 'warning'| 'danger'| 'info'info
effect主题样式'light'| 'dark'light
closable是否可关闭booleanfalse