支付寶小程序結(jié)果類組件 結(jié)果頁·Message

結(jié)果頁。

掃碼體驗(yàn)

示例代碼

{
 "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> 插槽加入的內(nèi)容，加入更多自定義內(nèi)容。</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>主標(biāo)題</view>
 <input value="{{title}}" onInput="titleChange"/>
 <view>副標(biāo)題</view>
 <textarea value="{{subTitle}}" onInput="subtitleChange"/>
 <checkbox onChange='onChange'/>顯示按鈕
</view>

Page({
  data: {
    title: '操作成功',
    subTitle: '內(nèi)容詳情可折行，建議不超過兩內(nèi)容。也可以通過 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