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

基本使用

<template>
	<un-notify message="Hi uView Next" :show="show" @close="handleClose"></un-notify>
	<!-- 使用v-model:show属性, 无需接受回调函数 -->
	<un-notify message="Hi uView Next" v-model:show="show"></un-notify>
</template>

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

	const show = ref(true);

	const handleClose = () => {
		show.value = false;
	};
</script>

ref调用

<template>
  <un-notify ref="notifyRef"></un-notify>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import type { UnNotifyComponentPublicInstance } from '@/uni_modules/uview-unix';	

	const notifyRef = ref <UnNotifyComponentPublicInstance | null>(null)

	onMounted(() => {
		notifyRef.value?.open({
			top: 10,
			type: "error",
			color: "#000",
			bgColor: "#e8e8e8",
			message: "Hi uView",
			duration: 1000 * 3,
			fontSize: 20,
			safeAreaInsetTop: true,
		} as UnNotifyOptions);

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

		// 关闭 notify
		// notifyRef.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	组件的zIndex值	string | number	100
customStyle	组件的自定义样式	string | object	{}

Methods

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

Events v4.1.7

事件名	说明	回调参数
open	组件打开时触发	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 变量使用 文档