V3 Element

Appearance

On this page

Alert 提示 ​

用于页面中展示重要的提示信息。

基础用法 ​

Alert 组件不属于浮层元素，不会自动消失或关闭。

Alert 组件提供四种类型，由 type 属性指定，默认值为 info。

this is the alert
this is the alert
this is the alert
this is the valert
<template>
  <div class="basic block">
    <vk-alert type="success">this is the alert</vk-alert>
    <vk-alert type="warning">this is the alert</vk-alert>
    <vk-alert type="info">this is the alert</vk-alert>
    <vk-alert type="danger">this is the valert</vk-alert>
  </div>
</template>

<style>
.block {
  margin-bottom: 10px;
}
</style>

主题 ​

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">
    <vk-alert type="success" effect="dark">this is the alert</vk-alert>
    <vk-alert type="warning" effect="dark">this is the alert</vk-alert>
    <vk-alert type="info" effect="dark">this is the alert</vk-alert>
    <vk-alert type="danger" effect="dark">this is the alert</vk-alert>
  </div>
</template>

不可关闭 ​

可以设置 Alert 组件是否为可关闭状态，closable 属性决定 Alert 组件是否可关闭，该属性接受一个 Boolean，默认为 true。

without close
<template>
  <div class="basic block">
    <vk-alert type="success" :closable="false">without close</vk-alert>
  </div>
</template>

Alert API ​

属性 ​

属性名说明类型默认值
type类型enum - 'success'| 'warning'| 'danger'| 'info'info
effect主题enum - 'light'| 'dark'light
closable是否可以关闭booleantrue

事件 ​

事件名描述类型
close关闭 Alert 时触发的事件() => void

插槽 ​

插槽名说明
default自定义默认内容