MiniX自绘渲染跨平台框架

# Blank 缺省页

请扫码查看示例

# 介绍

用于无数据时显示的缺省内容。

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 img 属性,控制要显示的图片。 img 属性支持超链接。 通过设置 desc 属性,控制要显示的文本。

<element name="m-blank" src="@/node_modules/mui-minix/src/blank/index"></element>
<div class="f-c">
  <m-blank class="m-b-10" img="equipment" desc="暂无设备"></m-blank>
  <m-blank class="m-b-10" img="home" desc="还没有设置家庭"></m-blank>
  <m-blank class="m-b-10" img="card" desc="暂无卡券"></m-blank>
  <m-blank class="m-b-10" img="order" desc="暂无订单"></m-blank>
  <m-blank class="m-b-10" img="empty" desc="还没有帖子"></m-blank>
  <m-blank class="m-b-10" img="redpacket" desc="暂无记录，快去领红包吧~"></m-blank>
  <m-blank class="m-b-10" img="time" desc="未设置定时"></m-blank>
  <m-blank class="m-b-10" img="result" desc="抱歉 没有找到“xx”相关的产品"></m-blank>
  <m-blank class="m-b-10" img="conn" desc="暂无网络"></m-blank>
  <m-blank class="m-b-10" img="message" desc="暂无消息"></m-blank>
  <m-blank class="m-b-10" img="recipe" desc="暂时还没有收藏食谱"></m-blank>
  <m-blank class="m-b-10" img="book" desc="还没有预约安装维修服务"></m-blank>
<div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.f-c{
  flex-direction: column;
}

.m-b-10{
  margin-bottom: 100px;
}
1
2
3
4
5
6
7

# 自定义描述内容

通过设置默认插槽,可以自定义描述内容。

<element name="m-blank" src="@/node_modules/mui-minix/src/blank/index"></element>
<element name="m-button" src="@/node_modules/mui-minix/src/button/index"></element>
<div class="f-c">
  <m-blank class="m-b-10" img="update">
    <text class="txt f-s-12 m-t-5">当前版本暂不支持</text>
    <text class="txt f-s-12 m-t-5">请更新到APP最新版</text>
  </m-blank>
  <m-blank class="m-b-10" img="location">
    <text class="txt f-s-12 m-t-5">还没有服务地址</text>
    <text class="txt f-s-12 m-t-5">请点击右上角"+"添加</text>
  </m-blank>
  <m-blank class="m-b-10" img="empty" desc="400-8899-315">
    <text class="txt f-s-12 m-t-5">抱歉，亲查询的网点不存在</text>
    <text class="txt f-s-12 m-t-5">您可以拨打24小时服务热线咨询</text>
  </m-blank>
  <m-blank class="m-b-10" img="wifi">
    <text class="txt f-s-12 m-t-5">保存家庭Connect信息，享受更便捷的智能服务</text>
    <m-button class="m-t-10" text="添加Connect信息"></m-button>
  </m-blank>
  <m-blank class="m-b-10" img="location" desc="无法获取地址，请手动刷新">
    <m-button class="m-t-10" text="刷新"></m-button>
    <text class="txt f-s-12 m-t-10">重新定位</text>
  </m-blank>
  <m-blank class="m-b-10" img="conn">
    <text class="txt f-s-12 m-t-5">网络未连接，请检查你的网络设置</text>
    <m-button class="m-t-10" text="刷新"></m-button>
  </m-blank>
<div>
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
.f-c{
  flex-direction: column;
}

.m-b-10{
  margin-bottom: 100px;
}

.txt{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

.f-s-12{
  font-size: 12px;
}

.m-t-5{
  margin-top: 5px;
}

.m-t-10{
  margin-top:10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Api

# Prop

字段 说明 类型 默认值 是否必须
img 默认图片, 支持超链接 string - 是
desc 文本描述 string - 否

# 内置图片

名称 说明
equipment 暂无设备
home 还没有设置家庭
card 暂无卡券
order 暂无订单
empty 通用
redpacket 红包
time 未设置定时
result 无结果
conn 无链接
message 无消息
recipe 无食谱
book 未预约
update 未更新
location 找不到位置
connect 无connect

# Slots

名称 说明
default 自定义描述内容