Socket
Socket
Sign inDemoInstall

vue-skeleton-loading

Package Overview
Dependencies
1
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-skeleton-loading

a skeleton loading


Version published
Maintainers
1
Weekly downloads
298
decreased by-17.22%

Weekly downloads

Readme

Source

Vue Skeleton Loading version vue

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

Demo

vue-skeleton-loading

Install

npm

npm install vue-skeleton-loading --save 

Dev

// 安装依赖
npm install

// 运行在 localhost:8080
npm run dev

Usage

项目入口文件全局注册

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: '<App />',
	components: {
		App
	}
});

使用组件

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

例子一:

<template>
    <div class="list1">
        <skeleton-loading>
            <row
                    v-for="i in 6"
                    :key="i"
                    :gutter="{top: '10px', bottom: '10px'}"
            >
                <column :span="3" :gutter="10">
                    <circle-skeleton></circle-skeleton>
                </column>
                <column :span="20" :gutter="10">
                        <square-skeleton 
                            :count="2"
                            :boxProperties="{
                                bottom: '15px',
                                width: '250px',
                                height: '15px'
                            }"
                        >
                        </square-skeleton>
                </column>
            </row>
        </skeleton-loading>
    </div>
</template>

<script>
    export default {}
</script>

效果

skeleton-loading-demo1

例子二:

<template>
    <div class="page">
        <skeleton-loading>
            <row 
                :gutter="{
                    bottom: '15px'
                }"
            >
                <square-skeleton 
                    :count="2"
                    :boxProperties="{
                        top: '10px',
                        height: '26px'
                    }"
                >
                </square-skeleton>
            </row>
            <row>
                <column :span="4">
                    <circle-skeleton></circle-skeleton>
                </column>
                <column :span="20" :gutter="20">
                    <square-skeleton 
                        :boxProperties="{
                            top: '10px',
                            width: '70px',
                            height: '15px'
                        }"
                    >
                    </square-skeleton>
                    <square-skeleton 
                        :boxProperties="{
                            width: '100px',
                            height: '15px',
                            top: '10px'
                        }"
                    >
                    </square-skeleton>
                </column>
            </row>
            <row :gutter="{top: '20px'}">
                <square-skeleton 
                    :count="4"
                    :boxProperties="{
                        bottom: '10px'
                    }" 
                >
                </square-skeleton>
            </row>
            <row>
                 <square-skeleton 
                    :boxProperties="{
                        bottom: '10px',
                        height: '200px'
                    }"    
                >
                </square-skeleton>
            </row>
        </skeleton-loading>
    </div>
</template>

<script>
    export default {}
</script>

<style lang="less">
    .page {
        padding: 15px;
    }
</style>

效果

skeleton-loading-demo1

Options

SkeletonLoading

Props

PropsTypeDefaultDescription
----

Function

NameTypeDescrition
---

Events

NameTypeDescription
---

Slot

NameDescription
default slot-

CircleSkeleton

Props

PropsTypeDefaultDescription
backColorString#e7e7e7background color
diameterString100%diameter of circle

Function

NameTypeDescrition
---

Events

NameTypeDescription
---

Slot

NameDescription
--

SquareSkeleton

Props

PropsTypeDefaultDescription
backColorString#e7e7e7background color
boxPropertiesObjectbox properties of square skeleton
countNumber1count of square skeleton

boxProperties

ItemTypeDefaultDescription
widthString100%宽度 默认为容器的宽度支持px、em、rem单位
heightString16px高度 支持px、em、rem单位
topString0外上边距 支持px、em、rem单位
bottomString0外下边距 支持px、em、rem单位

Function

NameTypeDescrition
---

Events

NameTypeDescription
---

Slot

NameDescription
--

Column

Props

PropsTypeDefaultDescription
gutterNumber0左右的外边距 相当于 pading: 0 gutter, 单位px。
spanNumber-一行被等分为24份,span值为一行中占据的份数,参考这里
orderNumber-一行中位置优先级,参考这里

Function

NameTypeDescrition
---

Events

NameTypeDescription
---

Slot

NameDescription
--

Row

Props

PropsTypeDefaultDescription
gutterObject-上下的外边距 相当于 pading: gutter.top 0 gutter.bottom 0, 单位px。
alignString-值可以为 top, middle, bottom, 具体可以参考 flex
justifyNumber-值可以为 start, end, center, space-around, space-between, 具体可以参考 flex

gutter

PropsTypeDefaultDescription
topString0上外边距 相当于 pading-top: top, 需要带上单位, 单位可以是px em rem。
bottomString0下外边距 相当于 pading-bottom: top, 需要带上单位, 单位可以是px em rem。

Function

NameTypeDescrition
---

Events

NameTypeDescription
---

Slot

NameDescription
--

Notice

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

e.g

<skeleton-loading>
            <row 
                :gutter="{
                    bottom: '15px'
                }"
            >
                <square-skeleton 
                    :count="2"
                    :boxProperties="{
                        top: '10px',
                        height: '26px'
                    }"
                >
                </square-skeleton>
            </row>
            <row>
                <column :span="4">
                    <circle-skeleton></circle-skeleton>
                </column>
                <column :span="20" :gutter="20">
                    <square-skeleton 
                        :boxProperties="{
                            top: '10px',
                            width: '70px',
                            height: '15px'
                        }"
                    >
                    </square-skeleton>
                    <square-skeleton 
                        :boxProperties="{
                            width: '100px',
                            height: '15px',
                            top: '10px'
                        }"
                    >
                    </square-skeleton>
                </column>
            </row>
            <row :gutter="{top: '20px'}">
                <square-skeleton 
                    :count="4"
                    :boxProperties="{
                        bottom: '10px'
                    }" 
                >
                </square-skeleton>
            </row>
            <row>
                 <square-skeleton 
                    :boxProperties="{
                        bottom: '10px',
                        height: '200px'
                    }"    
                >
                </square-skeleton>
            </row>
        </skeleton-loading>

License

MIT

Keywords

FAQs

Last updated on 17 Feb 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc