如何在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>