骨架屏的使用

基本使用:为了在加载的过程中等待效果更好，封装一个骨架屏组件。(基于vue3和ts)

大致步骤:

• 需要一个组件，做占位使用。这个占位组件有个专业术语：骨架屏组件。
• 属性：高，宽，背景，是否有闪动画，是否有淡入淡出动画。

• 这是一个公用组件，需要全局注册，将来这样的组件建议在vue插件中定义。

• 使用组件完成左侧分类骨架效果。

封装组件

width,height,bg,animated,fade是从父组件传来的值

  <XtxSkeleton bg="#e4e4e4" :width="306" :height="306" animated fade/>

<script setup lang="ts">
//定义prop接收
const {
  width = "100",
  height = "200",
  bg = "skyblue",
  animated = "true",
  fade = "true",
} = defineProps<{
  width?: number;
  height?: number;
  bg?: string;
  animated?: boolean;
  fade?: boolean;
}>();
</script>

<template>
  <div
    class="xtx-skeleton"
    :style="{ width: width + 'px', height: height + 'px' }"
    :class="{ shan: animated, fade }"
  >
    <!-- 1.盒子 -->
    <div class="block" :style="{ backgroundColor: bg }"></div>
  </div>
  <!-- 闪效果 xtx-skeleton 伪元素 -->
</template>

<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: 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;
  }
}
</style>

全局注册(插件)

基本使用

const app = createApp(App)
app.component("组件名", 组件对象)

全局组件的使用-插件

// 统一的注册所有的全局组件
import XtxSkeleton from '@/components/XtxSkeleton/XtxSkeleton.vue'
// App 是在vue库中定义好的类型
import { App } from 'vue'
export default {
  install (app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
  }
}

在全局main.js中注册

import XtxUI from './components'
const app = createApp(App)
app.use(XtxUI)

补充:让全局组件而在element-plus中的组件有提示

创建一个global.d.ts

import XtxSkeleton from '@/components/XtxSkeleton/XtxSkeleton.vue'
// 参考：
declare module 'vue' {
  export interface GlobalComponents {
    XtxSkeleton: typeof XtxSkeleton
  }
}
export {}

小结:在TS中定义了全局组件，有固定的套路让它具备提示效果