Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
vue-skeleton-loading
Advanced tools
a skeleton loading
Weekly downloads
Readme
Vue Skeleton Loading 是一个让我们快速和方便写出自定义 skeleton loading 的插件。
npm
npm install vue-skeleton-loading --save
// 安装依赖
npm install
// 运行在 localhost:8080
npm run dev
项目入口文件全局注册
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>
效果
例子二:
<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>
效果
Props
Props | Type | Default | Description |
---|---|---|---|
- | - | - | - |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
default slot | - |
Props
Props | Type | Default | Description |
---|---|---|---|
backColor | String | #e7e7e7 | background color |
diameter | String | 100% | diameter of circle |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
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 |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
Props
Props | Type | Default | Description |
---|---|---|---|
gutter | Number | 0 | 左右的外边距 相当于 pading: 0 gutter, 单位px。 |
span | Number | - | 一行被等分为24份,span值为一行中占据的份数,参考这里 。 |
order | Number | - | 一行中位置优先级,参考这里 。 |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
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 |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
每一个 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>
FAQs
a skeleton loading
The npm package vue-skeleton-loading receives a total of 261 weekly downloads. As such, vue-skeleton-loading popularity was classified as not popular.
We found that vue-skeleton-loading demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.