Vue Skeleton Loading !version !vue

Vue Skeleton Loading 是一个让我们快速和方便写出自定义 skeleton loading 的插件。

Demo

vue-skeleton-loading

Install

npm

``
npm install vue-skeleton-loading --save
`

Dev

`js
// 安装依赖
npm install

// 运行在 localhost:8080
npm run dev
`

Usage

项目入口文件全局注册

`vue
import Vue from 'vue';
import VueRouter from 'vue-router';
// 引用组件
import VueSkeletonLoading from 'vue-skeleton-loading';
import App from './app.vue';
import Index from './components';
import Page from './components/page';
import List1 from './components/list1';

// 安装插件
Vue.use(VueSkeletonLoading);
Vue.use(VueRouter);


const routes = [
{
name: 'index',
path: '/',
component: Index
},
{
name: 'page',
path: '/page',
component: Page
},
{
name: 'list1',
path: '/list1',
component: List1
}
];
const router = new VueRouter({
routes
});

new Vue({
el: '#app',
router,
template: '',
components: {
App
}
});
`

使用组件

本插件总共有 5 个组件，两个基础组件（ CircleSkeleton, SquareSkeleton ），两个布局组件（ Column, Row ），一个容器组件（ SkeletonLoading ）。

例子一：

`vue




`

效果

!skeleton-loading-demo1



例子二：

`





`

效果

!skeleton-loading-demo1

Options

$3

Props

| Props | Type | Default | Description |
| :---- | :--- | :------ | :---------- |
| - | - | - | - |

Function

| Name | Type | Descrition |
| :--- | :--- | :--------- |
| - | - | - |

$3

| Name | Type | Description |
| :--- | ---- | ----------- |
| - | - | - |

$3

| Name | Description |
| ------------ | ----------- |
| default slot | - |

$3

Props

| Props | Type | Default | Description |
| :-------- | :----- | :------ | :----------------- |
| backColor | String | #e7e7e7 | background color |
| diameter | String | 100% | diameter of circle |

Function

| Name | Type | Descrition |
| :--- | :--- | :--------- |
| - | - | - |

$3

| Name | Type | Description |
| :--- | ---- | ----------- |
| - | - | - |

$3

| Name | Description |
| ---- | ----------- |
| - | - |

$3

Props

| Props | Type | Default | Description |
| :------------ | :----- | :------ | :-------------------------------- |
| backColor | String | #e7e7e7 | background color |
| boxProperties | Object | | box properties of square skeleton |
| count | Number | 1 | count of square skeleton |

> boxProperties

| Item | Type | Default | Description |
| ------ | ------ | ------- | ------------------------- |
| width | String | 100% | 宽度 默认为容器的宽度支持px、em、rem单位 |
| height | String | 16px | 高度 支持px、em、rem单位 |
| top | String | 0 | 外上边距 支持px、em、rem单位 |
| bottom | String | 0 | 外下边距 支持px、em、rem单位 |

Function

| Name | Type | Descrition |
| :--- | :--- | :--------- |
| - | - | - |

$3

| Name | Type | Description |
| :--- | ---- | ----------- |
| - | - | - |

$3

| Name | Description |
| ---- | ----------- |
| - | - |

$3

Props

| Props | Type | Default | Description |
| :----- | :----- | :------ | :--------------------------------------- |
| gutter | Number | 0 | 左右的外边距 相当于 pading: 0 gutter, 单位px。 |
| span | Number | - | 一行被等分为24份，span值为一行中占据的份数，参考这里 。 |
| order | Number | - | 一行中位置优先级，参考这里 。 |

Function

| Name | Type | Descrition |
| :--- | :--- | :--------- |
| - | - | - |

$3

| Name | Type | Description |
| :--- | ---- | ----------- |
| - | - | - |

$3

| Name | Description |
| ---- | ----------- |
| - | - |

$3

Props

| Props | Type | Default | Description |
| :------ | :----- | :------ | :--------------------------------------- |
| gutter | Object | - | 上下的外边距 相当于 pading: gutter.top 0 gutter.bottom 0, 单位px。 |
| align | String | - | 值可以为 top, middle, bottom, 具体可以参考 flex。 |
| justify | Number | - | 值可以为 start, end, center, space-around, space-between, 具体可以参考 flex 。 |

> gutter

| Props | Type | Default | Description |
| :----- | :----- | :------ | :--------------------------------------- |
| top | String | 0 | 上外边距 相当于 pading-top: top, 需要带上单位， 单位可以是px em rem。 |
| bottom | String | 0 | 下外边距 相当于 pading-bottom: top, 需要带上单位， 单位可以是px em rem。 |

Function

| Name | Type | Descrition |
| :--- | :--- | :--------- |
| - | - | - |

$3

| Name | Type | Description |
| :--- | ---- | ----------- |
| - | - | - |

$3

| Name | Description |
| ---- | ----------- |
| - | - |

Notice

每一个 Skeleton Loading 所有的组件都必须是被 SkeletonLoading 组件包裹使用

e.g

`

:gutter="{
bottom: '15px'
}"
>
:count="2"
:boxProperties="{
top: '10px',
height: '26px'
}"
>







:boxProperties="{
top: '10px',
width: '70px',
height: '15px'
}"
>

:boxProperties="{
width: '100px',
height: '15px',
top: '10px'
}"
>




:count="4"
:boxProperties="{
bottom: '10px'
}"
>



:boxProperties="{
bottom: '10px',
height: '200px'
}"
>



``

License

MIT