hare-ui

Appearance

Return to top
On this page

Alert 警告

基本使用

成功提示信息
警告提示信息
普通提示信息
错误提示信息
基本使用
使用不同类型的Alert进行提示。
<template>
  <div class="margin--every">
    <h-alert type="success" title="成功提示信息"></h-alert>
    <h-alert type="warning" title="警告提示信息"></h-alert>
    <h-alert type="info" title="普通提示信息"></h-alert>
    <h-alert type="error" title="错误提示信息"></h-alert>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

居中文字

成功提示信息
警告提示信息
普通提示信息
错误提示信息
居中文字
使用`center`居中文字。
<template>
  <div class="margin--every">
    <h-alert type="success" title="成功提示信息" center></h-alert>
    <h-alert type="warning" title="警告提示信息" center></h-alert>
    <h-alert type="info" title="普通提示信息" center></h-alert>
    <h-alert type="error" title="错误提示信息" center></h-alert>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

字体图标

成功提示信息
警告提示信息
普通提示信息
错误提示信息
字体图标
使用`icon`展示图标。
<template>
  <div class="margin--every">
    <h-alert type="success" title="成功提示信息" icon></h-alert>
    <h-alert type="warning" title="警告提示信息" icon></h-alert>
    <h-alert type="info" title="普通提示信息" icon></h-alert>
    <h-alert type="error" title="错误提示信息" icon></h-alert>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

自定义关闭警告

成功提示信息
警告提示信息
普通提示信息关闭
错误提示信息知道了
关闭警告
使用`close`表示可关闭警告，`close-text`使用文字替换关闭图标。
<template>
  <div class="margin--every">
    <h-alert type="success" title="成功提示信息"></h-alert>
    <h-alert type="warning" title="警告提示信息" close></h-alert>
    <h-alert type="info" title="普通提示信息" close-text="关闭"></h-alert>
    <h-alert type="error" title="错误提示信息" close-text="知道了"></h-alert>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

描述性文字

成功提示信息这是一则警告的辅助性说明文字
警告提示信息这是一则警告的辅助性说明文字
普通提示信息这是一则含icon的警告的辅助性说明文字
错误提示信息这是一则警告的辅助性说明文字
知道了
描述性文字
使用`description`对警告添加辅助描述信息。
<template>
  <div class="margin--every">
    <h-alert
      type="success"
      title="成功提示信息"
      close
      description="这是一则警告的辅助性说明文字"
    ></h-alert>
    <h-alert
      type="warning"
      title="警告提示信息"
      description="这是一则警告的辅助性说明文字"
    ></h-alert>
    <h-alert
      type="info"
      title="普通提示信息"
      icon
      description="这是一则含icon的警告的辅助性说明文字"
    ></h-alert>
    <h-alert
      type="error"
      title="错误提示信息"
      close-text="知道了"
      description="这是一则警告的辅助性说明文字"
    ></h-alert>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

组件 API

Attributes 属性

参数说明类型可选值默认值
type主题类型stringsuccess/warning/info/errorsuccess
title提示标题string-Title
center文字是否居中boolean-false
icon是否显示图标boolean-false
close警告是否可关闭boolean-false
close-text使用自定义文字代替 close 图标string--
description为警告添加描述性信息string--