为什么要使用
数据都都是ajax请求渲染来的 然后它可能请求的慢就会一片白 这不好 所以就要使用骨架屏了 站位 像这样
创建个组件
<template><divclass="xtx-skeleton shan":style="{width:'100px',height:'50px'}"><!--1 盒子--><divclass="block":style="{backgroundColor:'black'}"></div><!--2 闪效果 xtx-skeleton 伪元素---></div></template><script>exportdefault{
name:'Skeleton'}</script><style scoped lang="less">.xtx-skeleton{
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;.block{
width:100%;
height:100%;
border-radius:2px;}}.shan{&::after{
content:"";
position: absolute;
animation: shan1.5s ease0s infinite;
top:0;
width:50%;
height:100%;
background: linear-gradient(
to left,rgba(255,255,255,0)0,rgba(255,255,255,0.3)50%,rgba(255,255,255,0)100%);
transform:skewX(-45deg);}}
@keyframes shan{0%{
left:-100%;}100%{
left:120%;}}</style>样子是有过度效果的 闪闪的
这样写都是固定大小 要修改一下
<template><divclass="xtx-skeleton shan":style="{width:width,height:height}"><!--1 盒子--><divclass="block":style="{backgroundColor:background}"></div><!--2 闪效果 xtx-skeleton 伪元素---></div></template><script>exportdefault{
name:'XtxSkeleton',
props:{
width:{default:'30px',
type: String},
height:{default:'30px',
type: String},
background:{default:'black',
type: String}}}</script>在使用的时候 传入需要的大小就行了
<XtxSkeletonwidth="100px"height="100px"background="blue"/>全局组成
import XtxSkeletonfrom'@/components/XtxSkeleton.vue'exportdefault{install(app){
app.component(XtxSkeleton.name, XtxSkeleton)}}真实使用
<ulclass="menu"v-if="$store.state.category.list.length > 0"><li:class="{active:item.id===id}"v-for="item in categoryList":key="item.id"@mouseenter="id = item.id"><RouterLinkto="/"> {{ item.name }}</RouterLink><templatev-if="item.children"><RouterLinkv-for="sub in item.children.slice(0, 2)":key="sub.id"to="/">
{{ sub.name }}</RouterLink></template></li></ul><ulclass="menu"v-else><liv-for="(item,idx) in 10":key="idx"><XtxSkeletonstyle="margin-right:10px"width="50px"height="25px"background="#3d3c3b"></XtxSkeleton><XtxSkeletonstyle="margin-right:10px"width="50px"height="25px"background="#3d3c3b"></XtxSkeleton><XtxSkeletonstyle="margin-right:10px"width="50px"height="25px"background="#3d3c3b"></XtxSkeleton></li></ul>声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
