Lost-UI

Appearance

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 ​

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