vue3骨架屏组件封装

骨架屏封装首先要想好父组件应该传入给子组件什么属性，然后再写代码, 我这变传入五个属性分别是

1. width宽
2. height高
3. bg背景颜色
4. animated滑动样式
5. fade一闪一闪样式

封装一个子组件命名为XtxSkeleton

在子组件随便设置一些样式

在父组件引入子组件

传递值到子组件

在子组件接收值并且设置样式

样式代码如下

.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: shan 1.5s ease 0s 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%;
  }
}

.fade {
  animation: fade 1s linear infinite alternate;
}
@keyframes fade {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

这样骨架屏就封装好了，可以注册为全局组件，然后需要不同宽高，背景颜色效果都可以通过在父组件传递到子组件更改哦