# Msg 结果页

[toc]

`Msg` 组件提供常见的用户操作反馈布局，帮助用户快速实现结果页。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-msg": "../dist/msg/index"
  }
}

```

## 用法

### 基础用法

```html
<tea-msg
  icon="success"  
  iconColor="#29CC85" 
  title="操作成功" 
  description="内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情" 
  buttons="{{ buttons }}" 
  footer="Copyright © 2013-2020 Tencent Cloud." 
  fixed
>
</tea-msg>
```

```javascript
Page({
  data: {
    buttons: [
      {
        variant: "primary",
        name: "确认",
        click: e => {
          wx.navigateBack()
        }
      }
    ]
  }
})
```

### 高级用法

可以通过插槽添加定制化内容。

```html
<tea-msg
  title="操作成功" 
  description="内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情" 
  buttons="{{ buttons }}" 
  footer="Copyright © 2013-2020 Tencent Cloud." 
  fixed
>
  <view slot="header">
    <image src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/image.svg" mode="scaleToFill"></image>
  </view>
</tea-msg>
```

## Props

| 参数          | 描述                                            | 类型              | 默认值     |
| ----------- | --------------------------------------------- | --------------- | ------- |
| icon        | 图标名称或图片链结，可选值请参见 [Icon 组件](/mp/packages/icon) | `String`        | -       |
| iconColor   | 图标颜色                                          | `String`        | -       |
| iconSize    | 图标大小。默认单位为px，支持自带单位。                          | `Number,String` | `64px`  |
| title       | 标题                                            | `String`        | -       |
| description | 描述                                            | `String`        | -       |
| buttons     | 按钮列表                                          | `Array`         | `[]`    |
| blockButton | 按钮是否为通栏样式                                     | `Boolean`       | `true`  |
| footer      | 底部内容                                          | `String`        | -       |
| fixed       | 底部内容是否定位在底部                                   | `Boolean`       | `false` |

## 事件

| 事件名        | 描述      | 回调参数                       |
| ---------- | ------- | -------------------------- |
| bind:click | 点击按钮时触发 | e.detail.index: 当前点击按钮的序号值 |

## buttons

`Props`中的`buttons`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：

| 键名       | 描述                                              | 类型        | 默认值     |
| -------- | ----------------------------------------------- | --------- | ------- |
| name     | 按钮文案                                            | `String`  | -       |
| variant  | 按钮的样式类型，可选值请查阅 [Button 组件](/mp/packages/button) | `String`  | -       |
| disabled | 是否为禁用状态                                         | `Boolean` | `false` |

## Slots

| 名称     | 描述         |
| ------ | ---------- |
| header | 自定义 header |
| body   | 自定义 body   |
| footer | 自定义 footer |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                          | 默认值                  | 描述  |
| ---------------------------- | -------------------- | --- |
| msg-title-text-size          | @font-size-h1        | -   |
| msg-title-text-color         | @text-base-color     | -   |
| msg-description-text-size    | @font-size-sm        | -   |
| msg-description-text-color   | @text-light-color    | -   |
| msg-button-margin-horizontal | @padding-xs          | -   |
| msg-button-margin-vertical   | @padding-sm          | -   |
| msg-footer-text-size         | @font-size-xs        | -   |
| msg-footer-text-color        | @text-disabled-color | -   |
| msg-footer-padding           | @padding-md          | -   |