基于Vue的骨架屏实现
import Skeleton from './index.js'
Vue.component(Skeleton.name, Skeleton)
<template>
<gm-skeleton>
<Component />
<div></div>
<p><span></span></p>
</gm-skeleton>
</template>
.gm-skeleton {
background-image: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%) !important;
background-color: transparent !important;
background-size: 400% 100%;
animation: skeleton-loading 1.5s ease-in infinite;
min-height: .3rem;
min-width: 1rem;
}
@keyframes skeleton-loading {
from {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
属性名 | 值 | 描述 |
---|---|---|
showSpin | Boolean | 判断是否显示骨架屏(默认为true) |
skeletPrefix | String | 骨架屏ClassName(默认为gm-skeleton) |
init | Boolean | 默认第一层的子元素不添加骨架屏名字,因为背景色一般都会设置在根元素上,所以这里不做骨架屏处理,默认为true |