Message 消息提示

概述

Message 消息提示，用于展现简短的提示信息，在窗口顶部显示。

# 支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiMessage from "@/components/firstui/fui-message/fui-message.vue"
export default {
	components:{
		fuiMessage
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 background 属性设置消息提示框背景色。

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法 show 来显示提示信息。

<fui-message ref="msg" :background="background"></fui-message>

data() {
	return {
		background: 'rgba(0,0,0,.6)'
	}
},
methods: {
	//调用此方法显示提示消息
	showMsg(){
		let options = {}
		options.text = 'Hello First UI！'
		this.$refs.msg.show(options)
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13

设置显示时间

<fui-message ref="msg"></fui-message>

methods: {
	//调用此方法显示提示消息
	showMsg() {
		let options = {}
		options.duration = 4000
		options.text = '4s后关闭提示信息！默认2s~'
		this.$refs.msg.show(options)
	}
}

1
2
3
4
5
6
7
8
9

自定义内容

自定义显示内容放入组件内部即可

<fui-message ref="tips">
	<view class="fui-icon__box">
		<fui-icon name="checkbox" color="#fff" :size="48"></fui-icon>
	</view>
</fui-message>

1
2
3
4
5

.fui-icon__box {
	padding-right: 16rpx;
}

1
2
3

methods: {
	//调用此方法显示提示消息
	showMsg() {
		let options = {}
		//text值可不传
		options.text = '您已操作成功！'
		this.$refs.tips.show(options)
	}
}

1
2
3
4
5
6
7
8
9

# Slots

插槽名称	说明
default	提示消息自定义内容

# Props

属性名	类型	说明	默认值	平台差异说明
padding	Array	消息提示框padding值，[上，右，下，左]，可简写为 [上，右]	['24rpx', '32rpx']	-
background	String	消息提示框背景色	rgba(0, 0, 0, 0.6)	-
color	String	消息提示文本字体颜色	#fff	-
size	Number, String	消息提示文本字体大小，单位rpx	30	-
textAlign	String	消息提示文本对齐方式，可选值：left/center/right	center	-
top	Number, String	消息提示框top值，单位px	0	-
left	Number, String	消息提示框left值，单位rpx	0	-
right	Number, String	消息提示框right值，单位rpx	0	-
ridus	Number, String	消息提示框圆角值，单位rpx	0	-
zIndex	Number	消息提示框z-index值	1001	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部

# Events

事件名	说明	回调参数
-	-	-

# Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法 show 来显示提示信息。

以下background、color、size、textAlign参数如果传值将覆盖props中同名属性（V1.4.0+支持）。

方法名	说明	传入参数
show	调用方法显示提示消息	{ text:提示消息文本，可选 duration:提示消息显示时间，单位ms，可选 background:消息提示框背景色，可选 color:消息提示文本字体颜色，可选 size:消息提示文本字体大小，可选 textAlign:消息提示文本对齐方式，可选 }

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用。

开通会员 (opens new window)

← Lottie 动画 SwipeAction 滑动菜单 →