0.2.0 • Published 6 years ago
jason-vue-app v0.2.0
jason-vue-app
移动端布局组件 Demo
功能
- App.vue / 页面组件.vue 自动初始化(调用 init 方法)
- 初始化时,显示 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 状态 |