Alert 提示

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

基础用法

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

success alert

warning alert

danger alert

info alert

<script setup>
import KAlert from "@/components/Alert/Alert.vue";
function handleAlertclose() {}
</script>
<template>
  <div>
    <k-alert
      :showIcon="true"
      type="success"
      title="success alert"
      :closable="true"
      class="kalert"
    >
    </k-alert>
    <k-alert
      :showIcon="true"
      type="warning"
      title="warning alert"
      :closable="true"
      class="kalert"
    >
    </k-alert>
    <k-alert :showIcon="true" type="danger" title="danger alert" class="kalert">
    </k-alert>
    <k-alert :showIcon="true" type="info" title="info alert" class="kalert">
    </k-alert>
  </div>
</template>
<style scoped>
.kalert {
  margin-bottom: 20px;
}
</style>

主题

Alert 组件提供了两个不同的主题：light 和 dark。

通过设置 effect 属性来改变主题，默认为 light。

success alert

warning alert

danger alert

info alert

<script setup>
import KAlert from "@/components/Alert/Alert.vue";
function handleAlertclose() {}
</script>
<template>
  <div>
    <k-alert
      :showIcon="true"
      type="success"
      title="success alert"
      effect="dark"
      :closable="true"
      class="kalert"
    >
    </k-alert>
    <k-alert
      :showIcon="true"
      type="warning"
      title="warning alert"
      effect="dark"
      :closable="true"
      class="kalert"
    >
    </k-alert>
    <k-alert
      :showIcon="true"
      type="danger"
      title="danger alert"
      effect="dark"
      class="kalert"
    >
    </k-alert>
    <k-alert
      :showIcon="true"
      type="info"
      title="info alert"
      effect="dark"
      class="kalert"
    >
    </k-alert>
  </div>
</template>
<style scoped>
.kalert {
  margin-bottom: 20px;
}
</style>

文字描述

为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。

除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。 辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。

success alertthis is a success alert

<script setup>
import KAlert from "@/components/Alert/Alert.vue";
</script>
<template>
  <div>
    <k-alert
      :showIcon="true"
      type="success"
      title="success alert"
      description="this is a success alert"
      effect="dark"
      :closable="false"
      class="kalert"
    >
    </k-alert>
  </div>
</template>
<style scoped>
.kalert {
  margin-bottom: 20px;
}
</style>

Alert Attributes

Name	Description	Type	Default
type	Alert 类型	enum - 'success'| 'warning'| 'danger'| 'info'	—
effect	主题样式	enum - 'dark'|'light'	light
closable	是否可以关闭	boolean	false
title	Alert 标题	string	—
description	描述性文本	string	—
show-icon	是否显示类型图标	boolean	false

Events

名称	描述	类型
close	关闭 Alert 时触发的事件	Function

Slots

名称	描述
content	Alert 内容描述