该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。

基本使用

<template>
  <un-notify message="Hi uView" :show="show"></un-notify>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const show = ref(true);
</script>

ref调用

<template>
  <un-notify ref="unNotify" message="Hi uView"></un-notify>
</template>

<script setup lang="ts">
  import { ref, onMounted } from "vue";

  const unNotify = ref();

  onMounted(() => {
    unNotify.value?.show({
      top: 10,
      type: "error",
      color: "#000",
      bgColor: "#e8e8e8",
      message: "Hi uView",
      duration: 1000 * 3,
      fontSize: 20,
      safeAreaInsetTop: true,
      customStyle: { padding: "10px" },
    });

    // 也可以通过主题形式调用，如：
    // unNotify.value?.primary('Primary主题')

    // 关闭 notify
    // unNotify.value?.close()
  });
</script>

API

Props

属性名	说明	类型	默认值
top	到顶部的距离	string | number	0
type	主题类型	string	'primary'
color	字体颜色	string	'#ffffff'
bgColor	背景颜色	string	-
message	展示的文字内容	string	-
duration	展示时长，为0时不消失，单位ms	string | number	3000
fontSize	字体大小	string | number	15
safeAreaInsetTop	是否留出顶部安全距离（状态栏高度）	boolean	false
zIndex 4.0.100	组件的zIndex值	string | number	100
customStyle	组件的自定义样式	string | object	{}

Methods

方法名	说明	参数类型
show	显示并加载配置	Function
primary	显示primary主题消息提示	Function
success	显示success主题消息提示	Function
warning	显示warning主题消息提示	Function
error	显示error主题消息提示	Function
close	关闭消息提示	Function

Slot

名称	说明
icon	通知左侧的图标区域

数据类型

/**
 * Notify配置选项类型
 * 用于配置消息提示的显示和行为
 */
type UnNotifyOptions = {
  top?: string | number; // 到顶部的距离，默认0
  type?: string; // 主题类型，默认primary
  color?: string; // 字体颜色，默认#ffffff
  bgColor?: string; // 背景颜色
  message?: string; // 展示的文字内容
  duration?: string | number; // 展示时长，为0时不消失，单位ms，默认3000
  fontSize?: string | number; // 字体大小，默认15
  safeAreaInsetTop?: boolean; // 是否留出顶部安全距离（状态栏高度），默认false
  zIndex?: string | number; // 组件的zIndex值，默认100
  customStyle?: string | object; // 组件的自定义样式
  success?: () => void; // 打开后的回调函数
  fail?: (result: UnShowNotifyFail) => void; // 失败后的回调函数
};

/**
 * Notify错误类型
 * 用于表示Notify显示失败时的错误信息
 */
type UnShowNotifyFail = {
  errCode: number; // 错误码
  errSubject: string; // 错误主体
  errMsg: string; // 错误信息
};

Scss 变量

变量名	默认值	说明
$un-notify-padding	8px 10px	通知内边距
$un-notify-text-font-size	$text-base	通知文字大小
$un-notify-primary-bg-color	$color-primary	primary主题背景颜色
$un-notify-success-bg-color	$color-success	success主题背景颜色
$un-notify-error-bg-color	$color-error	error主题背景颜色
$un-notify-warning-bg-color	$color-warning	warning主题背景颜色

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档