Message 全局提醒

概述

轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

使用指南

在 .json 中引入组件

"usingComponents": {
    "i-message": "../../dist/message/index"
}

示例

Message 组件主要依靠 JavaScript 主动调用，所以只需在 wxml 中添加一个组件，并设置 id，其余配置在 .js 里完成。

如果只有一个 Message 组件，建议将 id 设置为 #message，否则需要额外配置 selector 属性来指定。

<i-button type="ghost" bind:click="handleDefault">默认提醒</i-button>
<i-button type="ghost" bind:click="handleSuccess">成功提醒</i-button>
<i-button type="ghost" bind:click="handleWarning">警告提醒</i-button>
<i-button type="ghost" bind:click="handleError">错误提醒</i-button>
<i-button type="ghost" bind:click="handleDuration">自定义持续时间</i-button>
<i-message id="message" />

const { $Message } = require('../../dist/base/index');
Page({
    handleDefault () {
        $Message({
            content: '这是一条普通提醒'
        });
    },
    handleSuccess () {
        $Message({
            content: '这是一条成功提醒',
            type: 'success'
        });
    },
    handleWarning () {
        $Message({
            content: '这是一条警告提醒',
            type: 'warning'
        });
    },
    handleError () {
        $Message({
            content: '这是一条错误提醒',
            type: 'error'
        });
    },
    handleDuration () {
        $Message({
            content: '我将在 5 秒后消失',
            duration: 5
        });
    }
});

API

$Message properties