介绍

突出显示要重点提示用户的信息。警告提示会一直显示，除非用户手动关闭。

引入

import Alert from 'sard-uniapp/components/alert/alert.vue'

代码演示

基础使用

<template>
  <sar-alert>默认警告框</sar-alert>
</template>

类型

使用 type 属性设置不同的类型。

<template>
  <sar-alert type="primary">primary 警告提示</sar-alert>
  <sar-alert type="success">success 警告提示</sar-alert>
  <sar-alert type="warning">warning 警告提示</sar-alert>
  <sar-alert type="danger">danger 警告提示</sar-alert>
</template>

显示图标

设置 show-icon 属性显示图标。

<template>
  <sar-alert show-icon type="primary">primary 警告提示</sar-alert>
  <sar-alert show-icon type="success">success 警告提示</sar-alert>
  <sar-alert show-icon type="warning">warning 警告提示</sar-alert>
  <sar-alert show-icon type="danger">danger 警告提示</sar-alert>
</template>

可关闭的

设置 closable 属性显示关闭按钮。

<template>
  <sar-alert closable>可关闭警告框</sar-alert>
</template>

方形警告框 ^1.28+

警告框默认带有圆角，设置 square 可去掉其圆角。

<template>
  <sar-alert closable>可关闭警告框</sar-alert>
</template>

API

AlertProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
type	警告提示样式类型	'primary' | 'success' | 'warning' | 'danger'	'primary'
show-icon	是否显示图标	StyleValue	-
closable	是否显示关闭按钮	boolean	false
color	字体颜色	string	-
background	背景颜色	string	-
square 1.28+	方形警告框	boolean	false

AlertSlots

插槽	描述	属性
default	自定义默认内容	-
icon	自定义图标	-

AlertEmits

事件	描述	类型
close	点击关闭按钮触发	() => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-alert-paddding-x: 32rpx;
  --sar-alert-paddding-y: 16rpx;
  --sar-alert-font-size: var(--sar-text-base);
  --sar-alert-bg-opacity: 0.1;
  --sar-alert-border-radius: var(--sar-rounded);

  --sar-alert-icon-margin-right: 12rpx;

  --sar-alert-close-padding: 16rpx;
  --sar-alert-close-margin: -16rpx;
  --sar-alert-close-size: var(--sar-text-base);
}