Chi-UI

Appearance

Alert 警告提示 ​

代码示例 ​

基础用法 ​

通过设置 type 属性为 info、success、warning、error 以创建不同类型的警告提示。

警告提示的内容
警告提示的内容
警告提示的内容
警告提示的内容
警告提示的内容
<template>
  <div style="max-width: 600px">
    <chi-alert>警告提示的内容</chi-alert>
    <chi-alert type="info">警告提示的内容</chi-alert>
    <chi-alert type="success">警告提示的内容</chi-alert>
    <chi-alert type="warning">警告提示的内容</chi-alert>
    <chi-alert type="error">警告提示的内容</chi-alert>
  </div>
</template>

带标题警告 ​

当需要为警告添加一个简要的概括时，可以设置 title 属性或通过同名插槽添加一个标题。

警告标题
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容 
<template>
  <div style="max-width: 600px">
    <chi-alert title="警告标题">警告提示的内容</chi-alert>
    <chi-alert title="警告标题" type="info">警告提示的内容</chi-alert>
    <chi-alert title="警告标题" type="success">警告提示的内容</chi-alert>
    <chi-alert type="warning">
      <template #title>警告标题</template>
      警告提示的内容
    </chi-alert>
    <chi-alert type="error">
      <template #title>警告标题</template>
      警告提示的内容
    </chi-alert>
  </div>
</template>

可关闭 ​

添加 closable 属性可以显示关闭按钮，点击关闭按钮可关闭警告提示。

警告提示的内容
警告标题
警告提示的内容
<template>
  <div style="max-width: 600px">
    <chi-alert closable>警告提示的内容</chi-alert>
    <chi-alert closable title="警告标题" type="success">警告提示的内容</chi-alert>
  </div>
</template>

自定义关闭 ​

使用 close 插槽可以自定义关闭按钮的内容。

警告提示的内容
警告标题
警告提示的内容 
<template>
  <div style="max-width: 600px">
    <chi-alert closable>
      警告提示的内容
      <template #close>点击关闭</template>
    </chi-alert>
    <chi-alert closable title="警告标题" type="warning">
      警告提示的内容
      <template #close>我知道了</template>
    </chi-alert>
  </div>
</template>

显示图标 ​

添加 icon 属性可以显示图标，若传入一个字符串，则会使用对应名称的图标。

警告提示的内容
警告提示的内容
警告提示的内容
警告提示的内容
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容
警告标题
警告提示的内容
警告提示的内容
警告标题
警告提示的内容
<template>
  <div style="max-width: 600px">
    <chi-alert icon v-for="alertType in types" :key="alertType" :type="alertType"
      >警告提示的内容</chi-alert
    >
    <chi-alert icon title="警告标题" v-for="alertType in types" :key="alertType" :type="alertType"
      >警告提示的内容</chi-alert
    >
    <hr />
    <chi-alert :icon="Dog">警告提示的内容</chi-alert>
    <chi-alert title="警告标题" type="error" :icon="Bug">警告提示的内容</chi-alert>
  </div>
</template>

<script setup>
import { Bug, Dog } from 'lucide-vue-next'
const types = ['primary', 'info', 'success', 'warning', 'error']
</script>

有色的字体 ​

添加 colorful-text 属性可以使警告的字体带有相应的颜色。

警告提示的内容
警告提示的内容
警告标题
警告提示的内容
警告提示的内容
警告标题
警告提示的内容
<template>
  <div style="max-width: 600px">
    <chi-alert colorful-text>警告提示的内容</chi-alert>
    <chi-alert colorful-text icon type="info">警告提示的内容</chi-alert>
    <chi-alert colorful-text title="警告标题" type="success">警告提示的内容</chi-alert>
    <chi-alert colorful-text icon type="warning">警告提示的内容</chi-alert>
    <chi-alert colorful-text icon title="警告标题" type="error">警告提示的内容</chi-alert>
  </div>
</template>

无边框 ​

添加 no-border 属性可以禁用边框，在一些浅色调主题中可以让视觉效果更轻。

警告提示的内容
警告提示的内容
警告提示的内容
警告提示的内容
警告提示的内容
<template>
  <div style="max-width: 600px">
    <chi-alert no-border v-for="alertType in types" :key="alertType" :type="alertType"
      >警告提示的内容</chi-alert
    >
  </div>
</template>

<script setup>
const types = ['primary', 'info', 'success', 'warning', 'error']
</script>

API ​

预设类型 ​

ts
export type AlertType = 'primary' | 'info' | 'success' | 'warning' | 'error'

Alert 属性 ​

名称类型说明默认值
closableboolean设置警告提示是否可以被关闭false
colorful-textboolean设置字体是否具有和类型一致的颜色false
iconboolean | LucideIcon设置是否显示图标，也可传入图标false
no-borderboolean设置是否禁用警告提示的边框false
titlestring设置警告提示标题，使用同名插槽后失效''
typeAlertType警告提示的类型'primary'

Alert 事件 ​

名称说明参数
close当警告提示被关闭时触发

Alert 插槽 ​

名称说明参数
close警告提示的关闭按钮内容插槽
default警告提示的内容插槽
icon警告提示的图标内容插槽
title警告提示的标题内容插槽