Skip to content

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页面丢失1network无网络
page2页面丢失2slow网速缓慢

属性

参数说明类型默认值可选值
mode缺省页模式Stringdata见上
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缺省插图尺寸String200px-
customStyle自定义缺省页样式UTSJSONObject{}-
customTextStyle自定义缺省页提示文本样式UTSJSONObject{}-

插槽

名称说明
image在这里放置组件以替换默认插图
text在这里放置组件以替换提示文本
action在这里放置组件以设置操作区

使用 MIT 协议