# t-notify

Notify 消息通知

t-notify 组件介绍

消息通知组件，用于在页面上显示通知消息，支持配置消息类型、文本、持续时间等。

t-notify 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-notify 基础用法

基础用法参考 demo/notify/notify.uvue，通过 ref 获取组件实例并调用 add 方法添加通知。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mltr-15"
				title='Notice 通知提示列表'
				sub-title="..."></t-card>
		<introduction title="基础功能">
			<t-button type="primary"
					  @click="addMessage">随机一条默认配置消息</t-button>
		</introduction>
		<introduction title="设置图标">
			<t-button type="error"
					  @click="addMessage1('close-circle')">错误</t-button>
		</introduction>
		<introduction title="插槽测试">
			<t-button type="primary"
					  class="mb-15"
					  @click="addMessage2">show</t-button>
		</introduction>
		<t-notify ref="notify"></t-notify>

		<t-notify ref="notifyslot">
			<view :class="[`tbg-pn h-35 fc r-5 mb-20`]">
				<text :class="[`tfg-pn`]">插槽测试</text>
			</view>
		</t-notify>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import type { ComponentPublicInstance } from 'vue'

	// 定义 Refs
	const notify = ref<ComponentPublicInstance | null>(null)
	const notifyslot = ref<ComponentPublicInstance | null>(null)

	// 基础数据
	const list = ['欢迎使用Tui', '欢迎使用Tui', '晓云含雨却低徊', '大江东去浪淘尽']
	const typeList = ['primary', 'error', 'warning', 'success']

	// 随机数生成函数
	const random = (min : number, max : number) : number => {
		if (min >= 0 && max > 0 && max >= min) {
			const gab = max - min + 1
			return Math.floor(Math.random() * gab + min)
		}
		return 0
	}

	// 获取随机文本
	const getText = () => list[random(0, 3)] ?? ''

	// 获取随机类型
	const getType = () => typeList[random(0, 3)] ?? 'primary'

	// 随机默认配置消息
	const addMessage = () => {
		notify.value?.$callMethod('add', {
			type: getType(),
			text: getText(),
			duration: 1000
		})
	}

	// 插槽测试
	const addMessage2 = () => {
		notifyslot.value?.$callMethod('add', { duration: 1000 })
	}

	// 设置图标
	const addMessage1 = (icon : string) => {
		notify.value?.$callMethod('add', {
			type: getType(),
			text: getText(),
			duration: 1000,
			icon
		})
	}
</script>

t-notify Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain

t-notify Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Methods

方法名	说明	参数	返回值
add	添加通知	option: UTSJSONObject	无

Add 方法参数

属性名	类型	说明
type	String	通知类型：info, primary, error, warning, success
text	String	通知文本内容
duration	Number	显示持续时间，单位为毫秒
icon	String	通知图标名称
size	String	通知尺寸
color	String	文字颜色
backgroundColor	String	背景颜色

t-notify Slots

插槽名	说明
default	内容插槽，用于自定义通知内容