Alert 警告提示 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Alert 警告提示

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

# 使用场景

当某个页面需要向用户显示警告的信息时
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

通过以下属性配置组件：

title 和 description：设置组件的标题和描述内容
type：设置主题类型，可选值：primary、success、error、warning、info
effect：设置主题浅或深色调，可选值：light（浅色，默认）、dark（深色）

<template>
  <view>
    <u-alert :title="title" type="warning" :description="description"></u-alert>
    <u-alert
      :title="title"
      type="warning"
      effect="dark"
      :description="description"
    ></u-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: "uView的目标是成为uni-app生态最优秀的UI框架",
        description: "uView是uni-app生态专用的UI框架",
      };
    },
  };
</script>
✅ Copy success!

# 图标

通过 showIcon 设置是否显示图标，作用是让信息类型更加醒目。

注意：当前版本图标为 uView 内置图标，根据 type 参数显示不同的图标，无法自定义。

<u-alert type="warning" :show-icon="true"></u-alert>
✅ Copy success!

# 可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

通过 closable 参数配置是否可关闭

<template>
  <view>
    <u-alert
      :title="title"
      type="warning"
      :closable="closable"
      :description="description"
    ></u-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: "uView的目标是成为uni-app生态最优秀的UI框架",
        description: "uView是uni-app生态专用的UI框架",
        closable: true,
      };
    },
  };
</script>
✅ Copy success!

# 页面源码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
title	显示的文字	String	-	-
type	使用预设的颜色	String	warning	success \| primary \| error \| info
description	辅助性文字，颜色比 `title` 浅一点，字号也小一点	String	-	-
closable	关闭按钮（默认为叉号 icon 图标）	Boolean	false	true
showIcon	是否显示左边的辅助图标	Boolean	false	true
effect	多图时，图片缩放裁剪的模式	String	light（浅色）	dark（深色）
center	文字是否居中	Boolean	false	true
fontSize	字体大小	String \| Number	14	-

# Events

事件名	说明	回调参数
click	点击组件时触发	-
close	点击关闭按钮时触发	-

← ActionSheet 操作菜单 Toast 消息提示 →