如何设置小程序操作结果Result_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

对前一步操作的结果进行反馈，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

属性

属性	类型	必填	默认值	说明
type	'success' \| 'danger' \| 'info' \| 'warn' \| 'wait'	否	-	内置类型 success ：成功 danger ：错误/危险 info ：信息提示 warn：警告 wait：等待处理
image	string \| slot	否	-	自定义图片，如果配置了 type，则不生效
title	string \| slot	否	-	主文案
message	string \| slot	否	-	副文案
buttons	{text: string; type: 'default' \| 'primary' \| 'warn' \| 'danger' \| 'success' \| 'light'}[]	否	-	按钮类型
className	string	否	-	类名

事件

事件名	说明	类型
onButtonTap	弹窗关闭时，触发回调	`(idx: number) => void`

插槽

名称	说明
title	标题
message	描述
image	图标

样式类

类名	说明
amd-result	整体样式
amd-result-main	内容展示区域
amd-result-image	icon 区域样式
amd-result-buttons	按钮区域样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <demo-block padding="0" title="成功状态">
    <result title="操作成功" message="内容详情可折行，建议不超过两行" type="success"/>
  </demo-block>
  <demo-block padding="0" title="等待状态">
    <result title="等待处理" message="内容详情可折行，建议不超过两行" type="wait"/>
  </demo-block>
  <demo-block padding="0" title="提示状态">
    <result title="信息提示" message="内容详情可折行，建议不超过两行" type="info"/>
  </demo-block>
  <demo-block padding="0" title="提示状态">
    <result title="警告提示" message="内容详情可折行，建议不超过两行" type="warn"/>
  </demo-block>
  <demo-block padding="0" title="失败状态">
    <result title="无法完成操作" message="内容详情可折行，建议不超过两行" type="danger"/>
  </demo-block>
  <demo-block padding="0" title="自定义图标">
    <result 
      buttons="{{buttons}}" 
      image="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original"
      onButtonTap="handleTabBtn">
      <view slot="title">标题插槽</view>
      <view slot="message">描述插槽</view>
    </result>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    buttons: [
      {
        text: '主要操作',
        type: 'primary',
      },
      {
        text: '辅助操作',
        type: 'default',
      },
    ],
  },
  handleTabBtn(e) {
    my.alert({
      content: `当前点击的是第 ${e + 1} 个按钮：${this.data.buttons[e].text}`,
    });
  },
});

index.acss 的代码示例如下：

.amd-result-main {
  margin-bottom: 0;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Result",
  "usingComponents": {
    "result": "antd-mini/es/Result/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}