bravo-skeleton
v0.1.4
Published
``` Extend from element-loading,it means u can use almost most functions of v-loading ```
Downloads
6
Readme
bravo-skeleton
Extend from element-loading,it means u can use almost most functions of v-loading
install
npm i bravo-skeleton
//main.js
import bravoSkeleton from "bravo-skeleton"
Vue.install(bravoSkeleton)
tips
As default,the directive will show loading status.
if u use .block .pics .texts .circle modifies,it will show skeleton effect.
<div style="background-color: #334880;height: 900px" v-skeleton.block.texts.circle.pics="loading"></div>
recommend combinations
1.[.block].circle.texts.pics
2.[.block].list
3.[.block].image
Skeleton-Options
| Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | block | transform a inline element to inline-block | boolean | — | false | | circle | a circle prepend to the head of context | boolean | — | false | | texts | a self-computed component of text style skeleton | boolean | — | false | | pics | a self-computed component of picture style skeleton | boolean | — | false | | list | a self-computed component of list style skeleton,once u use this,the circle,texts,pics will not active | boolean | — | false | | image | a image skeleton | boolean | — | false |
Origin-Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to document.querySelector
to get the corresponding DOM node | object/string | — | document.body |
| body | same as the body
modifier of v-skeleton
| boolean | — | false |
| fullscreen | same as the fullscreen
modifier of v-skeleton
| boolean | — | true |
| lock | same as the lock
modifier of v-skeleton
| boolean | — | false |
| text | loading text that displays under the spinner | string | — | — |
| spinner | class name of the custom spinner | string | — | — |
| background | background color of the mask | string | — | — |
| customClass | custom class name for Loading | string | — | — |
--from dongjiayun