ResultPage 结果页

用于展示流程结束页面的控件

引入

import { ResultPage } from 'mand-mobile'
Vue.component(ResultPage.name, ResultPage)

使用指南

建议将组建的父元素设置填满视窗，以达到居中的效果。页面上的图片会根据type设置相应的默认值

代码演示

404

<template>
  <div class="md-example-child md-example-child-result-page md-example-child-result-page-0">
    <md-result-page
      type="lost">
    </md-result-page>
  </div>
</template>
<script>
import {ResultPage} from 'mand-mobile'
export default {
  name: 'result-page-demo',
  components: {
    [ResultPage.name]: ResultPage,
  },
}
</script>
<style lang="stylus">
.md-result-page.customized
  img
    height 131px
</style>
                

按钮

<template>
  <div class="md-example-child md-example-child-result-page md-example-child-result-page-2">
    <md-result-page
      :buttons="buttons">
    </md-result-page>
  </div>
</template>
<script>
import {ResultPage, Toast} from 'mand-mobile'
export default {
  name: 'result-page-demo',
  components: {
    [ResultPage.name]: ResultPage,
  },
  data() {
    return {
      buttons: [
        {
          text: '普通按钮',
          handler() {
            Toast.succeed('普通操作')
          },
        },
        {
          text: '高亮按钮',
          type: 'ghost-primary',
          handler() {
            Toast.succeed('不普通操作')
          },
        },
      ],
    }
  },
}
</script>
<style lang="stylus">
.md-result-page.customized
  img
    height 131px
</style>
                

网络异常

<template>
  <div class="md-example-child md-example-child-result-page md-example-child-result-page-1">
    <md-result-page
      type="network"
      subtext="点击屏幕，重新加载">
    </md-result-page>
  </div>
</template>
<script>
import {ResultPage} from 'mand-mobile'
export default {
  name: 'result-page-demo',
  components: {
    [ResultPage.name]: ResultPage,
  },
}
</script>
<style lang="stylus">
.md-result-page.customized
  img
    height 131px
</style>
                

自定义图案

<template>
  <div class="md-example-child md-example-child-result-page md-example-child-result-page-3">
    <md-result-page
      class="customized"
      img-url="//manhattan.didistatic.com/static/manhattan/do1_JX7bcfXqLpStKRv31xlp"
      text="不太确定自己错在了哪里..."
      subtext="要不然刷新试试？">
    </md-result-page>
  </div>
</template>
<script>
import {ResultPage} from 'mand-mobile'
export default {
  name: 'result-page-demo',
  components: {
    [ResultPage.name]: ResultPage,
  },
}
</script>
<style lang="stylus">
.md-result-page.customized
  img
    width auto
    height 131px
</style>
                

API

ResultPage Props

Button Props