Notify 消息提示

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

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

<template>
	<up-notify message="Hi uview-ultra" :show="show"></up-notify>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const show = ref(true);  
</script>

<script>
export default {
    data() {
        return {
            show: true
        }
    }
}
</script>

ref调用

<template>
	<up-notify ref="uNotifyRef" message="Hi uview-ultra"></up-notify>
</template>

<script setup>  
import { onMounted, ref, onUnmounted } from 'vue';  
  
// 假设你有一个 uNotify 组件的引用  
const uNotifyRef = ref(null);  
  
// 在组件挂载后执行  
onMounted(() => {  
    uNotifyRef.value.show({  
        top: 10,  
        type: 'error',  
        color: '#000',  
        bgColor: '#e8e8e8',  
        message: 'Hi uview-ultra',  
        duration: 1000 * 3,  
        fontSize: 20,  
        safeAreaInsetTop: true  
    });  
  
    // 你也可以定义其他方法或逻辑  
    // uNotifyRef.value.primary('Primary主题')
});  
  
// 如果需要，在组件卸载时关闭 notify  
onUnmounted(() => {  
    if (uNotifyRef.value) {  
        uNotifyRef.value.close();  
    }  
});  
</script>

<script>
export default {
    onReady(){
	    this.$refs.uNotify.show({
            top: 10,
            type: 'error',
            color: '#000',
            bgColor: '#e8e8e8',
            message: 'Hi uview-ultra',
            duration: 1000 * 3,
            fontSize: 20,
            safeAreaInsetTop:true
        })

        // 也可以通过主题形式调用，如：
        // this.$refs.uNotifyRef.primary('Primary主题')
        
        // 关闭 notify
        // this.$refs.uNotifyRef.close()
    }
}
</script>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

API

Methods

事件名	说明	类型
show	显示并加载配置	Handler
primary / success / warning /error	显示当前主题消息提示	Handler
close	关闭消息提示	Handler

Show Methods Arguments

参数	说明	类型	默认值	可选值
top	到顶部的距离	String | Number	0	-
type	主题，primary，success，warning，error	String	primary	-
color	字体颜色	String	#ffffff	-
bgColor	背景颜色	String	-	-
message	展示的文字内容	String	-	-
duration	展示时长，为0时不消失，单位ms	String | Number	3000	-
fontSize	字体大小，单位rpx	String | Number	15	-
safeAreaInsetTop	是否留出顶部安全距离（状态栏高度）	Boolean	false	true

Slot

参数	说明
icon	通知内容