基于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 |
IAmFineThanksMartin
https://gloomysunday28.github.io/vue-source/
https://github.com/Gloomysunday28/vue-ts2cfa
