uv-ui

# Notify 消息提示

✈

组件名：uv-notify

点击下载&安装 (opens new window)

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

# 平台兼容性

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

# 基本使用

使用ref调用组件show方法进行显示组件，更多参数参考API

<template>
	<uv-notify ref="notify" message="Hi uv-ui" type="success"></uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.show();
		}
	}
</script>

# 主题形式调用

组件内置了多个主题方法：primary success error warning。可以直接用ref进行调用，调用参数为提示文本，如下：

<template>
	<uv-notify ref="notify"></uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.primary('Primary主题');
		}
	}
</script>

# 自定义图标

通过插槽的方式自定义图标

<template>
	<uv-notify ref="notify" :duration="10*1000" type="error" message="HI uvui">
		<template v-slot:icon>
			<image src="https://via.placeholder.com/50x50.png/2878ff" style="width: 30rpx;height: 30rpx;" mode="aspectFit"></image>
		</template>
	</uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.show()
		}
	}
</script>

# 使用show方法传参

组件还提供了另一种传递参数的方式，参数直接通过show方法传递，如下：

<template>
	<uv-notify ref="notify"></uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.show({
				top: 10,
				type: 'error',
				color: '#000',
				bgColor: '#e8e8e8',
				message: 'Hi uv-ui',
				duration: 1000 * 3,
				fontSize: '20rpx',
				safeAreaInsetTop: true
			})
		}
	}
</script>

# 手动关闭提示

该组件通过duration参数控制显示时间，时间到会自动关闭，当然也可以使用close手动关闭

<template>
	<uv-notify ref="notify"></uv-notify>
</template>
<script>
	export default {
		onReady() {
			this.$refs.notify.show({
				top: 10,
				type: 'error',
				color: '#000',
				bgColor: '#e8e8e8',
				message: 'Hi uv-ui',
				duration: 1000 * 3,
				fontSize: '20rpx',
				safeAreaInsetTop: true
			})
			// 显示1秒主动关闭
			setTimeout(() => {
				this.$refs.notify.close();
			}, 1000)
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Notify Props

参数 说明 类型 默认值 可选值
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 字体大小，单位px（rpx） String | Number 15 -
safeAreaInsetTop 是否留出顶部安全距离（状态栏高度） Boolean false true | false
customStyle 自定义外部样式 Object - -

# Show Methods Params

与上面的Notify Props重复的参数作用和效果一致

参数 说明 类型 默认值 可选值
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 字体大小，单位px（rpx） String | Number 15 -
safeAreaInsetTop 是否留出顶部安全距离（状态栏高度） Boolean false true | false

# Notify Methods

事件名 参数 说明
show - 显示并加载配置
primary | success | warning | error - 显示当前主题消息提示
close - 关闭消息提示

# Notify Slots

参数 说明
icon 通知内容

← NoNetwork 无网络提示 →