Notify 消息提示

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

代码演示

基础用法

<!-- 在页面内添加对应的节点 -->
<hd-notify ref="notify"></hd-notify>

// 函数式调用
showNotify('哈喽啊，树先生！')


<script lang="ts" setup>
import { Notify } from '@/uni_modules/fant-mini-plus/components/hd-notify/types'
import { ref, onMounted } from 'vue'
const notify = ref<Notify>() // notify ref

onMounted(()=>{
  notify.value?.showNotify('哈喽啊，树先生！')
})
</script>

通知类型

支持primary、success、warning、error四种通知类型，默认为error。

// 主要通知
notify.value?.showNotify({ type: 'primary', message: '哈喽啊，树先生！' })

// 成功通知
notify.value?.showNotify({ type: 'success', message: '哈喽啊，树先生！' })

// 危险通知
notify.value?.showNotify({ type: 'error', message: '哈喽啊，树先生！' })

// 警告通知
notify.value?.showNotify({ type: 'warning', message: '哈喽啊，树先生！' })

自定义通知

自定义消息通知的颜色和展示时长。

notify.value?.showNotify({
  message: '自定义颜色',
  color: '#AAEEBB',
  background: '#FFAAEE'
})

notify.value?.showNotify({
  message: '自定义时长',
  duration: 1500
})

组件式调用

通过组件式调用使用 Notify。

<!-- 在页面内添加对应节点 -->
<hd-notify v-model="show" message="你好啊【表情】 "></hd-notify>

const show = ref<boolean>(false)

值得注意的是，组件式调用不支持onClick、onOpened、onClose回调。

方法

fant-mini 中导出了以下 Notify 相关的辅助函数：

方法名	说明	参数	返回值
showNotify	展示通知	NotifyOptions	Notify实例

NotifyOptions 数据结构

调用 showNotify 方法时，支持传入以下选项：

参数	说明	类型	是否必填	默认值
type	底色类型，可选值:primary、 success、error、warning	NotifyType	false	error
color	自定义文字颜色	String	false	#FFFFFF
zIndex	组件层级	Number	false	110
top	距离顶部长度	Number	false	0
message	提示的内容	String	false	''
context	选择器的选择范围，可以传入自定义组件的 this 作为上下文	Object	false	当前页面
duration	展示时长(ms)，值为 0 时，notify 不会消失，默认值 3000	Number	false	3000
selector	自定义节点选择器	String	false	hd-notify
background	背景颜色	String	false	-
safeAreaInsetTop	是否留出顶部安全距离（状态栏高度）	Boolean	false	false
onClick	点击时的回调函数	Function	false	-
onOpened	完全展示后的回调函数	Function	false	-
onClose	关闭时的回调函数	Function	false	-

Props

Name	Description	Type	Required	Default
value	是否展示	Boolean	false	false
message	提示的内容	String	false	-
background	自定义背景色	String	false	-
type	底色类型	String	false	error
color	文字颜色	String	false	-
duration	展示时长(ms)，值为 0 时，notify 不会消失，默认值3000	Number	false	3000
zIndex	层级	Number	false	110
safeAreaInsetTop	是否留出顶部安全距离（状态栏高度，自定义导航条时使用）	Boolean	false	false
top	距离顶部长度	—	false	-

Events

Event Name	Description	Parameters
input	消息展示状态变更时触发	value:Boolean 消息展示状态，建议通过v-model双向绑定输入值，而不是监听此事件的形式

Slots

Name	Description	Default Slot Content
default	-	-