Alert 警告提示

介绍

警告提示，展现需要关注的信息。

导入

import Alert from '@/components/feedback/Alert.vue'

用法

基本用法

展示不同类型的警告提示。

<template>
  <FlexCol :gap="20">
    <Alert type="primary" description="主要警告信息" />
    <Alert type="success" description="成功提示信息" />
    <Alert type="warning" description="警告提示信息" />
    <Alert type="danger" description="危险提示信息" />
    <Alert type="error" description="错误提示信息" />
    <Alert type="info" description="提示信息" />
    <Alert type="default" description="默认提示信息" />
  </FlexCol>
</template>

带标题的警告提示

同时显示标题和描述信息。

<template>
  <FlexCol :gap="20">
    <Alert type="primary" message="主要提示" description="这是一条带有标题的主要警告信息" />
    <Alert type="success" message="成功提示" description="这是一条带有标题的成功提示信息" />
    <Alert type="warning" message="警告提示" description="这是一条带有标题的警告提示信息" />
    <Alert type="danger" message="危险提示" description="这是一条带有标题的危险提示信息" />
  </FlexCol>
</template>

可关闭的警告提示

通过closeable属性设置警告提示可以关闭。

<template>
  <Alert v-if="show" type="warning" message="警告提示" description="这是一条可关闭的警告信息" closeable @close="show = false" />
</template>

自定义图标

通过icon属性设置自定义图标。

<template>
  <FlexCol :gap="20">
    <Alert type="primary" description="自定义图标的警告信息" icon="discount" />
    <Alert type="info" message="自定义图标" description="这是一条带有自定义图标的警告信息" icon="favorite" />
  </FlexCol>
</template>

自定义颜色

通过backgroundColor、borderColor和color属性自定义警告提示的颜色。

<template>
  <FlexCol :gap="20">
    <Alert 
      description="自定义背景颜色和文字颜色"
      backgroundColor="#ff9900"
      borderColor="#ff0000"
      color="#f0f9ff"
    />
    <Alert 
      type="success"
      message="自定义主题" 
      description="自定义背景颜色和文字颜色"
      color="#006600"
      borderColor="#00cc00"
    />
  </FlexCol>
</template>

使用自定义内容插槽

通过插槽自定义警告提示的内容。

<template>
  <Alert type="warning">
    <template #icon>
      <Icon icon="lock" color="#ff6600" fontSize="24" />
    </template>
    <view style="display: flex; flex-direction: column; gap: 8rpx;">
      <text style="font-size: 36rpx; font-weight: bold; color: #ff6600;">自定义标题</text>
      <text style="font-size: 28rpx; color: #ff9900;">这是自定义的内容文本，可以包含更多样式</text>
      <view style="margin-top: 12rpx; padding: 12rpx; background: #fff3e0; border-radius: 8rpx;">
        <text style="font-size: 26rpx; color: #e65100;">额外信息提示区域</text>
      </view>
    </view>
  </Alert>
</template>

限制内容显示行数

通过lines属性限制内容显示的行数，超出部分会自动截断并显示省略号。

<template>
  <Alert 
    type="info" 
    message="多行文本限制"
    description="这是一段比较长的文本内容，通过设置lines属性可以限制显示的行数，超出部分会自动截断并显示省略号。这是一段比较长的文本内容，通过设置lines属性可以限制显示的行数。"
    :lines="2"
  />
</template>

自定义关闭按钮

通过close插槽自定义关闭按钮的样式。

<template>
  <Alert v-if="show2" type="primary" message="自定义关闭按钮" description="点击自定义关闭按钮可以关闭提示" closeable>
    <template #close>
      <Icon icon="delete-filling" color="#999" :fontSize="24" @click="show2 = false" />
    </template>
  </Alert>
</template>

API 参考

Alert

警告提示组件。

Props

名称	说明	类型	必填	默认值
type	提示类型，可选值为 primary, success, warning, danger, error, info, default	AlertType	-	'default'
message	提示标题	string	-	-
description	提示内容	string	-	-
icon	自定义图标	string	-	-
color	文字和图标的颜色	string	-	-
backgroundColor	背景颜色	string	-	-
borderColor	边框颜色	string	-	-
closeable	是否显示关闭按钮	boolean	-	false
closeIcon	关闭图标	string	-	'close'
closeIconColor	关闭图标颜色	string	-	-
lines	内容最多显示的行数，0表示不限制	number	-	0

Slots

名称	说明
default	自定义内容区域
icon	自定义图标
message	自定义提示标题
description	自定义提示内容
close	自定义关闭按钮

Events

名称	说明	参数
close	关闭事件	$event
click	点击事件	$event

主题变量

名称	类型	默认值	说明
AlertBorderRadius	number	16	警告框圆角
AlertBorderWidth	string	'1px'	警告框边框宽度
AlertPadding	number	16	警告框内边距
AlertIconSize	number	20	图标大小
AlertIconMarginRight	number	12	图标右侧边距
AlertIconMarginTop	number	2	图标上边距
AlertTitleFontSize	string	'fontSize.medium'	标题字体大小
AlertTitleFontWeight	string	'bold'	标题字重
AlertMessageFontSize	string	'fontSize.small'	内容字体大小
AlertMessageMarginTop	number	8	内容与标题间距
AlertCloseButtonSize	number	42	关闭按钮大小
AlertCloseButtonMarginLeft	number	12	关闭按钮左侧边距