TnNotify-消息通知

Notify 消息通知一般用于让用户知道操作结果。

组件位置

nodeuni_modules

typescript

import TnNotice from '@tuniao/tnui-vue3-uniapp/components/notify/src/notify.vue'
import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp/components/notify'

import TnNotice from '@tuniao/tnui-vue3-uniapp/components/notify/src/notify.vue'
import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp/components/notify'

typescript

import TnNotice from '@/uni_modules/tuniaoui-vue3/components/notify/src/notify.vue'
import type { TnNotifyInstance } from '@/uni_modules/tuniaoui-vue3/components/notify'

import TnNotice from '@/uni_modules/tuniaoui-vue3/components/notify/src/notify.vue'
import type { TnNotifyInstance } from '@/uni_modules/tuniaoui-vue3/components/notify'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

该组件与其他组件的使用方法不大一样，并不是通过 Props 参数来进行控制，而是通过TnNotify组件的show方法来控制。

nodeuni_modules

vue

<script lang="ts" setup>
import { ref } from 'vue'
import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp'

const notifyRef = ref<TnNotifyInstance>()

const showNotify = () => {
  notifyRef.value?.show({
    msg: '操作成功',
  })
}
</script>

<template>
  <TnButton @click="showNotify">显示通知</TnButton>
  <TnNotify ref="notifyRef" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp'

const notifyRef = ref<TnNotifyInstance>()

const showNotify = () => {
  notifyRef.value?.show({
    msg: '操作成功',
  })
}
</script>

<template>
  <TnButton @click="showNotify">显示通知</TnButton>
  <TnNotify ref="notifyRef" />
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'
import type { TnNotifyInstance } from '@/uni_modules/tuniaoui-vue3'

const notifyRef = ref<TnNotifyInstance>()

const showNotify = () => {
  notifyRef.value?.show({
    msg: '操作成功',
  })
}
</script>

<template>
  <tn-button @click="showNotify">显示通知</tn-button>
  <tn-notify ref="notifyRef" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TnNotifyInstance } from '@/uni_modules/tuniaoui-vue3'

const notifyRef = ref<TnNotifyInstance>()

const showNotify = () => {
  notifyRef.value?.show({
    msg: '操作成功',
  })
}
</script>

<template>
  <tn-button @click="showNotify">显示通知</tn-button>
  <tn-notify ref="notifyRef" />
</template>

修改通知类型

通过type可以指定通知类型，目前支持primary、success、warning、danger、info五种类型，默认为primary

notifyRef.value?.show({
  msg: '操作失败',
  type: 'danger',
})

notifyRef.value?.show({
  msg: '操作失败',
  type: 'danger',
})

自定义通知的样式

通过bgColor和textColor可以自定义通知的背景色和文字颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色和字体颜色

notifyRef.value?.show({
  msg: '操作成功',
  bgColor: 'rgba(1, 190, 255, 0.3)',
  textColor: '#01beff',
})

notifyRef.value?.show({
  msg: '操作成功',
  bgColor: 'rgba(1, 190, 255, 0.3)',
  textColor: '#01beff',
})

自定义通知的位置

通过position可以自定义通知的位置，目前支持top、center、bottom三种位置，默认为top

notifyRef.value?.show({
  msg: '操作成功',
  position: 'center',
})

notifyRef.value?.show({
  msg: '操作成功',
  position: 'center',
})

使用自定义顶部导航栏时的注意事项

使用了自定义顶部导航栏后，页面的顶部变成了自定义导航栏的位置，此时如果通知的位置为top，通知会被自定义导航栏遮挡，此时可以设置TnNotify的offset-top参数来调整通知的位置。

vue

<template>
  <TnNotify ref="notifyRef" :offset-top="80" />
</template>

<template>
  <TnNotify ref="notifyRef" :offset-top="80" />
</template>

API

Props

属性名	说明	类型	默认值	可选值
z-index	Notify 消息通知的 zIndex	Number	20074	-
offset-top	距离顶部的距离，防止使用了自定义顶部导航栏后，`notify` 被遮挡，单位为 `px`	Number	0	-

show 函数配置参数

属性名	说明	类型	默认值	可选值	必填
msg	消息内容	String	-	-	是
type	消息类型	String	`primary`	`success` \ `warning` \ `danger` \ `info`	否
position	通知的位置	String	`top`	`center` \ `bottom`	否
bgColor	背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-	否
textColor	字体样式，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-	否
duration	自动关闭时间	Number	3000	-	否

TnNotify-消息通知 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

修改通知类型 ​

自定义通知的样式 ​

自定义通知的位置 ​

使用自定义顶部导航栏时的注意事项 ​

API ​

Props ​

show 函数配置参数 ​