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

支持平台

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

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

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

<wui-message ref="msgRef" :background="background"></wui-message>

const background = ref('rgba(0,0,0,.6)')
const msgRef = ref('')

//调用此方法显示提示消息
const showMsg = ()=>{
    let options = {}
    options.text = 'Hello World！'
    msgRef.value.show(options)
}

设置显示时间

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

<wui-message ref="msgRef"></wui-message>

//调用此方法显示提示消息
const showMsg = ()=>{
    let options = {}
    options.duration = 4000
    options.text = '4s后关闭提示信息！默认2s~'
    msgRef.value.show(options)
}

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中同名属性。

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