jason-vue-app

移动端布局组件 Demo

功能

1. App.vue / 页面组件.vue 自动初始化（调用 init 方法）
2. 初始化时，显示 loading 状态，若 reject 则显示 error 状态（init 方法是一个返回 promise 的方法）

说明

jason-app 组件是作为项目根组件使用 jason-app-page 组件是作为页面根组件使用

jason-app 布局

使用

npm i --save jason-vue-app

import jasonApp from 'jason-vue-app';
import 'jason-vue-app/dist/jason-vue-app.css';

Vue.use(jasonApp);

<!-- App.vue -->
<jason-app>
  <header slot="header">
  ...
  <footer slot="footer">
</jasn-app>

<!-- 页面组件.vue -->
<jason-app-page>
  ...
</jason-app-page>

props

jason-app 组件 和 jason-app-page 组件相同

name | description ----------- | -------------------------- loadingComp | 自定义 loading 组件 errorComp | 自定义 error 组件

slot

default app 和 page 都有，以下是 app 组件独有 slot

name | description ----------- | -------------------------- header | 显示在内容之前的 header footer | 显示在内容之后的 footer

methods

jason-app 组件 和 jason-app-page 组件相同

name | description ----------- | -------------------------- showLoading | 手动显示 loading 状态 hideLoading | 手动显示 error 状态 showError | 手动显示 loading 状态 hideError | 手动显示 error 状态