ResultPage 结果页

Scan me!

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

引入

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

使用指南

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

代码演示

404

  1. <template>
  2. <div class="md-example-child md-example-child-result-page md-example-child-result-page-0">
  3. <md-result-page
  4. type="lost">
  5. </md-result-page>
  6. </div>
  7. </template>
  8. <script>
  9. import {ResultPage} from 'mand-mobile'
  10. export default {
  11. name: 'result-page-demo',
  12. components: {
  13. [ResultPage.name]: ResultPage,
  14. },
  15. }
  16. </script>
  17. <style lang="stylus">
  18. .md-result-page.customized
  19. img
  20. height 131px
  21. </style>

按钮

  1. <template>
  2. <div class="md-example-child md-example-child-result-page md-example-child-result-page-2">
  3. <md-result-page
  4. :buttons="buttons">
  5. </md-result-page>
  6. </div>
  7. </template>
  8. <script>
  9. import {ResultPage, Toast} from 'mand-mobile'
  10. export default {
  11. name: 'result-page-demo',
  12. components: {
  13. [ResultPage.name]: ResultPage,
  14. },
  15. data() {
  16. return {
  17. buttons: [
  18. {
  19. text: '普通按钮',
  20. handler() {
  21. Toast.succeed('普通操作')
  22. },
  23. },
  24. {
  25. text: '高亮按钮',
  26. type: 'ghost-primary',
  27. handler() {
  28. Toast.succeed('不普通操作')
  29. },
  30. },
  31. ],
  32. }
  33. },
  34. }
  35. </script>
  36. <style lang="stylus">
  37. .md-result-page.customized
  38. img
  39. height 131px
  40. </style>

网络异常

  1. <template>
  2. <div class="md-example-child md-example-child-result-page md-example-child-result-page-1">
  3. <md-result-page
  4. type="network"
  5. subtext="点击屏幕,重新加载">
  6. </md-result-page>
  7. </div>
  8. </template>
  9. <script>
  10. import {ResultPage} from 'mand-mobile'
  11. export default {
  12. name: 'result-page-demo',
  13. components: {
  14. [ResultPage.name]: ResultPage,
  15. },
  16. }
  17. </script>
  18. <style lang="stylus">
  19. .md-result-page.customized
  20. img
  21. height 131px
  22. </style>

自定义图案

  1. <template>
  2. <div class="md-example-child md-example-child-result-page md-example-child-result-page-3">
  3. <md-result-page
  4. class="customized"
  5. img-url="//manhattan.didistatic.com/static/manhattan/do1_JX7bcfXqLpStKRv31xlp"
  6. text="不太确定自己错在了哪里..."
  7. subtext="要不然刷新试试?">
  8. </md-result-page>
  9. </div>
  10. </template>
  11. <script>
  12. import {ResultPage} from 'mand-mobile'
  13. export default {
  14. name: 'result-page-demo',
  15. components: {
  16. [ResultPage.name]: ResultPage,
  17. },
  18. }
  19. </script>
  20. <style lang="stylus">
  21. .md-result-page.customized
  22. img
  23. width auto
  24. height 131px
  25. </style>

API

ResultPage Props

属性说明类型默认值备注
type页面类别Stringemptytype可取lost, networkempty三个值,分别代表页面丢失、网络出错和空信息。根据类别不同,组件会拥有不同的默认图片和文案
img-url图片链接String空信息图片根据类别不同,组件会拥有不同的默认图片
text主文案String暂无信息根据类别不同,组件会拥有不同的默认主文案
subtext副文案String-以更小的字体和更淡的颜色显示在主文案下方
buttons按钮列表Array-按钮对象数组,按钮对象结构可参考Button Props表

Button Props

属性说明类型默认值备注
text按钮文字String--
type按钮样式类别Stringghost还可以选择ghost-primary,可参考Button控件
handler点击操作Function-点击按钮后调用的方法