title: 消息提示 Message

消息提示 Message

用于主动操作后的消息反馈。

基本使用

Message组件有以下两种用法：

1. 常规组件的使用方式，通过更改传入的属性值来控制Message的显示和隐藏。

2. wx.lin.showMessage(object)，使用wx.lin.showMessag的调用时，与组件的使用一致，需要在json文件中引入组件，且在wxml中写入Message组件。

wx.lin.showMessage接受的参数是个对象，里面包含了与消息提示相关的属性。

:::tip 第一种用法小程序基础库版本 2.6.1 开始支持。 :::

示例代码（第一种用法）

<!-- wxml -->
<l-button bind:lintap="showMessage">操作</l-button>
<l-message content="{{content}}"/>

// js
showMessage(){
    this.setData({
        show:true,
        content:'消息提示'
    })
}

示例代码（第二种用法）

<l-message />

// js
showMessage(){
    wx.lin.showMessage({
        content:'消息提示'
    })
}

显示消息

通过设置show属性为true显示消息（第一种用法使用该属性）,设置为fasle隐藏消息。

示例代码

<!-- wxml -->
<l-button bind:lintap="showMessage">操作</l-button>
<l-message content="{{content}}"/>

// js
showMessage(){
    this.setData({
        show:true,
        content:'消息提示'
    })
}

消息内容

通过content属性设置消息提示的内容，此处文字建议不超过十个。

:::img :::

示例代码

// js
showMessage(){
    wx.lin.showMessage({
        content:'内容'
    })
}

提示类型

通过type属性设置为primary、success、warning、error创建不同类型的消息提示。默认值为primary。

:::img :::

示例代码

// js
showMessage(){
    wx.lin.showMessage({
        type:'success',
        content:'内容'
    })
}

消息提示时长

通过duration属性设置消息提示时长。默认值为1500ms。

// js
showMessage(){
    wx.lin.showMessage({
        duration：4000,
        content:'内容'
    })
}

消息图标

通过icon属性设置消息内的图标的名称。默认图标为对应type的图标，当type为primary 时无图标。

通过image属性设置消息文字前的自定义图片。通过l-image-class属性可更改自定义图片的样式。

示例代码

// js
showMessage(){
    wx.lin.showMessage({
        type:'error',
        duration：4000,
        icon:'warning',
        content:'内容'
    })
}

消息提示属性

消息提示外部样式类