Message 消息提示

从页面顶部展示短暂消息，支持文本样式和插槽内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

基础用法

vue

<template>
  <!-- 顶部消息 -->
  <fui-message ref="messageRef" />
  <button @click="showMessage">显示消息</button>
</template>

<script>
export default {
  methods: {
    /** 显示消息 */
    showMessage() {
      this.$refs.messageRef.show({ text: '操作成功', size: 30 });
    }
  }
};
</script>

属性

属性	类型	说明	官网默认值
padding	Array	内容内边距	['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	顶部偏移，单位 px	0
left	Number / String	左侧偏移，单位 rpx	0
right	Number / String	右侧偏移，单位 rpx	0
ridus	Number / String	圆角，单位 rpx	0
zIndex	Number	层级，nvue 不支持	1001

ridus 是官网和当前源码使用的属性拼写。

方法和插槽

show({ text, duration, color, background, size, textAlign }) 显示消息，duration 默认 2000 毫秒。默认插槽用于自定义内容。

本地源码在未向 show 传入 size 时，将背景色误用作字号；示例显式传入了 size。nvue 中元素顺序影响显示层级。

事件

事件	说明	回调参数
—	无自定义事件	—

插槽

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

Message 消息提示 ​

支持平台 ​

基础用法 ​

属性 ​

方法和插槽 ​

事件 ​

插槽 ​

Message 消息提示

支持平台

基础用法

属性

方法和插槽

事件

插槽