nano-ui

Alert 警告 ​

用于页面中展示重要的提示信息。

基础用法 ​

Alert 组件不属于浮层元素，不会自动消失或关闭。Alert 组件提供四种类型，由 type 属性指定，为 success | warning | danger | info，默认值为 info。

通过 slot 传入内容

通过 prop 传入内容

<template>
  <h2>通过 slot 传入内容</h2>
  <div style="max-width: 600px">
    <n-alert type="success">Success alert</n-alert>
    <n-alert type="info">Info alert</n-alert>
    <n-alert type="warning">Warning alert</n-alert>
    <n-alert type="danger">Error alert</n-alert>
  </div>
  <h2>通过 prop 传入内容</h2>
  <div style="max-width: 600px">
    <n-alert type="success" title="Success alert" />
    <n-alert type="info" title="Info alert" />
    <n-alert type="warning" title="Warning alert" />
    <n-alert type="danger" title="Error alert" />
  </div>
</template>

主题 ​

Alert 组件提供了两个不同的主题：light 和 dark。通过设置 effect 属性来改变主题，默认为 light。

<template>
  <div style="max-width: 600px">
    <n-alert title="Success Alert" type="success" effect="dark" />
    <n-alert title="Info Alert" type="info" effect="dark" />
    <n-alert title="Warning Alert" type="warning" effect="dark" />
    <n-alert title="Error Alert" type="danger" effect="dark" />
  </div>
</template>

可关闭的警告 ​

可以设置 Alert 组件是否为可关闭状态，closable 属性决定 Alert 组件是否可关闭，该属性接受一个 Boolean，默认为 false。

<script setup>
import { NMessage } from 'nano-ui-vue';

function handleClose() {
  NMessage.info('close callback');
}
</script>
<template>
  <div class="basic block">
    <n-alert title="Unclosable alert" type="success" :closable="false" />
    <n-alert title="Alert with callback" type="warning" @close="handleClose" />
  </div>
</template>

带有图标 ​

通过设置 show-icon 属性来显示 Alert 的图标，这能更有效地向用户展示你的显示意图。

<template>
  <div style="max-width: 600px">
    <n-alert title="Success alert" type="success" show-icon />
    <n-alert title="Info alert" type="info" show-icon />
    <n-alert title="Warning alert" type="warning" show-icon />
    <n-alert title="Error alert" type="danger" show-icon />
  </div>
</template>

文字居中 ​

使用 center 属性让文字水平居中。

<template>
  <div style="max-width: 600px">
    <n-alert title="Success alert" type="success" center show-icon />
    <n-alert title="Info alert" type="info" center show-icon />
    <n-alert title="Warning alert" type="warning" center show-icon />
    <n-alert title="Error alert" type="danger" center show-icon />
  </div>
</template>

带有辅助性文字介绍 ​

除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。

<template>
  <div style="max-width: 600px">
    <n-alert
      title="With description"
      type="success"
      description="This is a description."
    />
  </div>
</template>

带有图标和辅助性文字介绍 ​

在具有辅助性文字介绍时，可以同时使用 show-icon 属性来展示图标。

<template>
  <div style="max-width: 600px">
    <n-alert
      title="Success alert"
      type="success"
      description="More text description"
      show-icon
    />
    <n-alert
      title="Info alert"
      type="info"
      description="More text description"
      show-icon
    />
    <n-alert
      title="Warning alert"
      type="warning"
      description="More text description"
      show-icon
    />
    <n-alert
      title="Error alert"
      type="danger"
      description="More text description"
      show-icon
    />
  </div>
</template>

API ​

Props ​

名称说明类型默认值
title标题string-
type类型'success' | 'warning' | 'info' | 'danger''info'
description辅助性文字string-
closable是否可关闭booleanfalse
center文字是否居中booleanfalse
show-icon是否显示图标booleanfalse
effect主题'light' | 'dark''light'

Events ​

事件名说明回调参数
close关闭 Alert 时触发的事件-

Slots ​

插槽名说明
defaultAlert 内容
title标题的内容

样式变量 ​

变量名说明默认值
--nano-alert-padding内边距12px 16px
--nano-alert-margin外边距20px 0 0
--nano-alert-font-size字体大小var(--nano-font-size-base)
--nano-alert-line-height行高1.4
--nano-alert-border-radius圆角var(--nano-border-radius-base)
--nano-alert-icon-size图标大小16px
--nano-alert-icon-margin图标外边距8px
--nano-alert-title-font-size标题字体大小var(--nano-font-size-base)
--nano-alert-title-line-height标题行高24px
--nano-alert-title-font-weight标题字重700
--nano-alert-desc-font-size描述字体大小var(--nano-font-size-base)
--nano-alert-desc-line-height描述行高21px
--nano-alert-desc-margin描述外边距5px 0 0
--nano-alert-close-size关闭按钮大小16px