点我扫二维码，查看demo

# Empty 空白提示

# 介绍

空状态下显示的占位符

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Empty } from '@dolphin-iot/ui'

Vue.use(Empty);

1
2
3
4

# 代码演示

# 基础用法

<template>
  <div class="demo-list">
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_equipment@3x.png')" desc="暂无设备" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_home@3x.png')" desc="还没有设置家庭" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_card@3x.png')" desc="暂无卡券" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_order@3x.png')" desc="暂无订单" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_empty@3x.png')" desc="还没有帖子" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_redpacket@3x.png')" desc="暂无记录，快去领红包吧~" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_time@3x.png')" desc="未设置定时" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_result@3x.png')" desc="抱歉 没有找到“xx”相关的产品" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_con@3x.png')" desc="暂无网络" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_message@3x.png')" desc="暂无消息" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_recipe@3x.png')" desc="暂时还没有收藏食谱" />
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_book@3x.png')" desc="还没有预约安装维修服务" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .demo-list{
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    font-size: 12px;
    overflow-y: auto;

    .pannel{
      padding-left: 10px;
      padding-right:10px;
      margin-bottom: 20px;
    }
  }
</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

# 自定义底部内容

通过默认的插槽自定义图片底部下方的内容

<template>
  <div class="demo-list">
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_update@3x.png')">
          <div>当前版本暂不支持</div>
          <div>请更新到APP最新版</div>
      </mx-empty>
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_location@3x.png')">
          <div>还没有服务地址</div>
          <div>请点击右上角"+"添加</div>
      </mx-empty>
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_empty@3x.png')" desc="400-8899-315">
          <div>抱歉，亲查询的网点不存在</div>
          <div>您可以拨打24小时服务热线咨询</div>
      </mx-empty>
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_wifi@3x.png')" buttonText="添加Wireless Network信息">
          <div>保存家庭Wireless Network信息，享受更便捷的智能服务</div>
          <mx-button>添加Wireless Network信息</mx-button>
      </mx-empty>
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_location@3x.png')" desc="无法获取地址，请手动刷新">
        <mx-button>刷新</mx-button>
        <div class="title">重新定位</div>
      </mx-empty>
    </div>
    <div class="pannel">
      <mx-empty :img="require('../../assets/img/img_no_con@3x.png')">
        <div>网络未连接，请检查你的网络设置</div>
        <mx-button>刷新</mx-button>
      </mx-empty>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
.mx-button{
  margin-top: 20px;
  margin-bottom: 20px;
}
</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
57
58
59
60

# Props

参数	说明	类型	默认值	是否必须
img	空状态下显示的图片	string	`-`	`-`
desc	图片下方的描述文字	string	`-`	`-`

# Slots

名称	说明	参数
default	自定义内容	`-`

← Dialog 对话框 Loading 加载 →