# 7.8 缺省页（Default page）

任何内容区域（页面、区块、组件、单数据）没有内容/数据显示给用户时，就会出现空白提示。

# 各情况展示

# 标注说明

# 应用示例

# dof-result

通用错误结果页

# 实例

# 基础用法

<template>
  <div class="dof-demo">
    <dof-result
      :type="type"
      class="result"
      :configuration="customSet"
      @dofResultButtonClicked="resultButtonClick"
      @dofResultSubButtonClicked="resultButtonClick"
    >
    </dof-result>
  </div>
</template>

<script>
import { Core, DofResult } from 'dolphin-intl-ui'

export default {
  components: {
    DofResult
  },
  data: () => ({
    type: 'noNetwork', // 缺省页type，目前只提供3种内置类型noNetwork、noUpdate、noPage
    customSet: {
      button: '刷新' // 按钮文案
      // btnSubTitle: '重新定位', // 文字按钮文案
      // content: '暂无消息', // 提示语文案
      // desc: '暂无消息', // 补充提示语文案
      // pic: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/result/img_no_location@2x.png' // 自定义底图
    }
  }),
  computed: {},
  created() {},
  methods: {
    minibarRightButtonClick() {
      Core.reload()
    },
    resultButtonClick(e) {
      Core.toast('button clicked')
    }
  }
}
</script>

<style scoped>
.dof-demo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 128px;
  background-color: #ffffff;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# Attributes

Prop Type Required Default Description
show Boolean N true 是否显示
type String N '' 缺省页类型；非 COLMO 主题未设置时回退为 noPage。内置类型:
网络异常:noNetwork
版本较低:noUpdate
找不到页面:noPage
padding-top Number / String N "-80" padding-top
configuration Object N {} 空白页配置覆盖
wrap-style Object N undefined 外层 wrap 样式自定义
bg-color String N '' 背景颜色
img-style Object N {} 图片样式自定义
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
text-color String N '' 文字颜色
desc-color String N '' 描述文字颜色
sub-text-color String N '' 副文字颜色

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

# 自定义配置案例

this.customSet={
    button: '刷新', // 按钮文案
    btnSubTitle: '重新定位', // 文字按钮文案
    content: '暂无消息', // 提示语文案
    desc: '暂无消息', // 补充提示语文案
    pic: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/result/img_no_location@2x.png' // 自定义底图
}
1
2
3
4
5
6
7

# Slot

当以上配置都不满足时候，你可以使用 slot 来自定义设置你的组件。

  1. <slot name="button"></slot>：按钮部分

# Events

事件名 说明 回调参数
dofResultButtonClicked 点击按钮 当前 configuration 对象的副本
dofResultSubButtonClicked 点击文字按钮 当前 configuration 对象的副本

← 7.9 消息提醒（Noticebar） →