更新记录

v1.0.0（2020-06-14）

重要说明

本插件目前仅支持H5和微信小程序

本插件H5基于vue-lottie组件封装，微信小程序基于lottie-miniprogram

动画素材均来源网络，作者仅对其进行了整理和封装

使用了sass也就是插件使用者需要安装sass插件

平台兼容性

my-abnor-page

异常页面，空页面展示

安装

使用npm安装【推荐】

npm install my-abnor-page

使用

import myAbnorPage from "my-abnor-page";

<my-abnor-page 
color="primary"
type="empty" 
tip="地狱空荡荡,连个鬼也没看见" 
:size="100">
<!-- 可选插槽 -->
<button type="primary">返回上一级</button>
</my-abnor-page>

插件市场下载组件安装

首先安装lottie-miniprogram,vue-lottie;

npm install --save vue-lottie npm install --save lottie-miniprogram

按需引入或者更加easycom直接使用

easycom 规格要求将组件放到components目录下

<my-abnor-page 
color="primary"
type="empty" 
tip="地狱空荡荡,连个鬼也没看见" 
:size="100">
<button type="primary">返回上一级</button>
</my-abnor-page>

属性说明

• color 动画颜色 可选值为
  • primary
  • plain
  • gray
• type 动画类型 可选值为
  • loading loading动画
  • message 消息为空
  • 404 找不到页面
  • empty 没有数据
  • rocket 火箭，建设中
  • search 找不到搜索结果
  • collection 收藏为空
  • ok 完成，任务全部完成
• size 动画尺寸【Number】
• tip 提示文字【String】

插槽说明

• 可传入插槽，通常用于设置返回按钮刷新按钮等。用户可根据实际情况自行设置