能自动适应外层样式的vue骨架屏组件。
npm install vue-loading-skeleton -S
or
yarn add vue-loading-skeleton
import { Skeleton } from 'vue-loading-skeleton';
import "vue-loading-skeleton/dist/style.css"
// In jsx template
<Skeleton />
<Skeleton count={5} />
或者在全局中注册组件
import Vue from 'vue';
import Skeleton from 'vue-loading-skeleton';
import "vue-loading-skeleton/dist/style.css"
Vue.use(Skeleton);
// In jsx template
<PuSkeleton />
<PuSkeleton count={5} />
<Skeleton/>
设计目的是能直接在你的vue组件中嵌套使用,组件能在加载时候自动用骨架填充空白的内容,所以你不用特别地设计字体大小、边距或其他样式与页面一样专用的骨架屏,因为组件会自动用合适的尺寸填充元素。
举个🌰:
<div class="item">
<div class="item__photo">
<PuSkeleton circle height="50px">
{{ props.data.img }}
</PuSkeleton>
</div>
<div class="item__meta">
<div class="item__title">
<PuSkeleton>{{ props.data.title }}</PuSkeleton>
</div>
<div class="item__info">
<PuSkeleton :count="2">{{ props.data.body }}</PuSkeleton>
</div>
</div>
</div>
由于组件是使用子节点的tag
和text
判断内容是否为空,从而判断组件的加载状态。所以当组件表现异常时候,你可以用v-if
或者用loading props
去替代组件嵌套。并希望能把问题及时反馈给我。
<div class="item">
<Skeleton>
{{ content }}
</Skeleton>
</div>
<div class="item">
<template v-if="content">{{ content }}</template>
<Skeleton v-else />
</div>
很多时候,骨架都会以列表的形式出现,所以你可以在循环的时候使用数字作为列表数据的默认值。
️ReferenceError
。
<div class="item" v-for="(item, index) in data" :key="index">
<Skeleton>
{{ item.content }}
</Skeleton>
</div>
export default {
data() {
return {
data: 10
}
},
async created() {
// some data fetch action
const { data } = await fetchData();
this.data = data;
}
}
使用 <SkeletonTheme />
组件设置所有子组件的样式:
import { Skeleton, Skeleton } form 'vue-loading-skeleton';
<SkeletonTheme color="#e6f3fd" highlight="#eef6fd">
<div class="item">
<div class="item__photo">
<PuSkeleton circle height="50px">
{{ props.data.img }}
</PuSkeleton>
</div>
<div class="item__meta">
<div class="item__title">
<PuSkeleton>{{ props.data.title }}</PuSkeleton>
</div>
<div class="item__info">
<PuSkeleton :count="2">{{ props.data.body }}</PuSkeleton>
</div>
</div>
</div>
</SkeletonTheme>
props | description | type | default |
---|---|---|---|
count | 单个组件里面显示的数量 | number | 1 |
duration | 动画过渡时间,0的时候为关闭动画 | number | 1.5 |
width | 组件长度 | string | |
height | 组件高度 | string | |
circle | 设置为圆形 | boolean | false |
loading | 组件加载状态,使用这个props时候不会检测子节点 | boolean | undefined |
props | description | type | default |
---|---|---|---|
color | 骨架的颜色 | string | #eeeeee |
highlight | 动画高亮颜色 | string | #f5f5f5 |
duration | 设置所有骨架组件的动画过渡时间 | number | 1.5 |
loading | 控制所有骨架组件加载状态 | boolean | undefined |
tag | 容器标签 | string | div |