Empty 缺省页
基于 邓琪昌 大佬的开源组件
flower-empty实现的缺省页组件。使用方法有改动。
基础用法
- 页面处于异常、无内容、加载等时状态时给予用户友好提示
vue
<template>
<sn-empty mode="data" text="Oops! 数据丢失了"></sn-empty>
</template>更多演示请下载 demo 查看
多模式
目前共支持 20 种模式。
| 模式 | 名称 | 模式 | 名称 |
|---|---|---|---|
| schedule | 日程 | loading | 加载中 |
| card | 卡包 | message | 消息 |
| favor | 收藏 | star | 喜爱 |
| coupon | 优惠券 | permission | 权限 |
| data | 数据 | record | 记录 |
| location | 位置 | search | 搜索 |
| fail | 载入失败 | server | 服务器 |
| folder | 文件夹 | shopping | 购物车 |
| page1 | 页面丢失1 | network | 无网络 |
| page2 | 页面丢失2 | slow | 网速缓慢 |
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| mode | 缺省页模式 | String | data | 见上 |
| text | 缺省页提示文本 | String | - | - |
| textSize | 缺省页提示文本字体大小 | String | $3 | - |
| textColor | 缺省页提示文本颜色 | String | $lineText | - |
| themeColor | 缺省插图主题色 | String | $primary | - |
| hairColor | 缺省插图人物头发颜色 | String | #483029 | - |
| clothesColor | 缺省插图人物上衣颜色 | String | #EDA20C | - |
| trousersColor | 缺省插图人物裤子颜色 | String | 为空则同 themeColor | - |
| shoesColor | 缺省插图人物鞋子颜色 | String | 为空则同 themeColor | - |
| itemColor | 缺省插图物品颜色 | String | #483029 | - |
| skinColor | 缺省插图人物皮肤颜色 | String | #ffcda5 | - |
| elementColor | 缺省插图元素颜色 | String | #ffffff | - |
| imageSize | 缺省插图尺寸 | String | 200px | - |
| customStyle | 自定义缺省页样式 | UTSJSONObject | {} | - |
| customTextStyle | 自定义缺省页提示文本样式 | UTSJSONObject | {} | - |
插槽
| 名称 | 说明 |
|---|---|
| image | 在这里放置组件以替换默认插图 |
| text | 在这里放置组件以替换提示文本 |
| action | 在这里放置组件以设置操作区 |
