支付宝小程序结果类组件 结果页·Message

结果页。

扫码体验

示例代码

{
 "defaultTitle": "Message",
 "usingComponents": {
   "message": "mini-ali-ui/es/message/index"
 }
}

<view>
  <message
    title="{{title}}"
    subTitle="{{subTitle}}"
    type="{{type}}"
    mainButton="{{mainButton}}" 
    subButton="{{subButton}}" 
    onTapMain="goBack">
    <view slot="tips">这里是通过 <text style="color: red;">slot</text> 插槽加入的内容，加入更多自定义内容。</view>
  </message>
  <radio-group class="radio-group" onChange="radioChange" name="lib">
    <label class="radio" a:for="{{items}}" key="label-{{index}}">
      <radio value="{{item.name}}" checked="{{item.checked}}" />
      <text class="radio-text">{{item.value}}</text>
    </label>
 </radio-group>
 <view>主标题</view>
 <input value="{{title}}" onInput="titleChange"/>
 <view>副标题</view>
 <textarea value="{{subTitle}}" onInput="subtitleChange"/>
 <checkbox onChange='onChange'/>显示按钮
</view>

Page({
  data: {
    title: '操作成功',
    subTitle: '内容详情可折行，建议不超过两内容。也可以通过 slot="tips" 插入更具有功能性的提示。',
    type: 'success',
    items: [
      { name: 'success', value: 'success', checked: true },
      { name: 'fail', value: 'fail' },
      { name: 'info', value: 'info' },
      { name: 'warn', value: 'warn' },
      { name: 'waiting', value: 'waiting' },
    ],
  },
  onLoad() {
  },
  goBack() {
    my.navigateBack();
  },
  radioChange(e) {
    this.setData({
      type: e.detail.value,
    });
  },
  titleChange(e) {
    this.setData({
      title: e.detail.value,
    });
  },
  subtitleChange(e) {
    this.setData({
      subTitle: e.detail.value,
    });
  },
  onChange(e) {
    if (e.detail.value) {
      this.setData({
        mainButton: {
          buttonText: '主要操作',
        },
        subButton: {
          buttonText: '辅助操作',
        },
      });
    } else {
      this.setData({
        mainButton: null,
        subButton: null,
      });
    }
  },
});

属性

slots