uView

# Notify 消息提示

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

# 平台差异说明

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

# 基本使用

<template>
	<u-notify message="Hi uView" :show="show"></u-notify>
</template>

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

✅ Copy success!

# ref调用

<template>
	<u-notify ref="uNotify" message="Hi uView"></u-notify>
</template>

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

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

✅ Copy success!

# 此页面源代码地址

页面源码地址


 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 通知内容

← SwipeAction 滑动单元格 →