如何在vue3使用骨架屏

为什么要使用

数据都都是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>