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
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
type | 页面类别 | String | empty | type可取lost , network 和empty 三个值,分别代表页面丢失、网络出错和空信息。根据类别不同,组件会拥有不同的默认图片和文案 |
img-url | 图片链接 | String | 空信息图片 | 根据类别不同,组件会拥有不同的默认图片 |
text | 主文案 | String | 暂无信息 | 根据类别不同,组件会拥有不同的默认主文案 |
subtext | 副文案 | String | - | 以更小的字体和更淡的颜色显示在主文案下方 |
buttons | 按钮列表 | Array | - | 按钮对象数组,按钮对象结构可参考Button Props表 |
Button Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
text | 按钮文字 | String | - | - |
type | 按钮样式类别 | String | ghost | 还可以选择ghost-primary ,可参考Button 控件 |
handler | 点击操作 | Function | - | 点击按钮后调用的方法 |