1.骨架屏组件封装

src/index.ts

@@ -67,6 +67,8 @@ import LayCarouselItem from './module/carouselItem/index'
 import LayColorPicker from './module/colorPicker/index'
 import LayTooltip from './module/tooltip/index'
 import LayInputNumber from './module/inputNumber/index'
+import LaySkeleton from './module/skeleton/index'
+import LaySkeletonItem from './module/skeletonItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -129,6 +131,8 @@ const components: Record<string, IDefineComponent> = {
   LayModal,
   LayTooltip,
   LayInputNumber,
+  LaySkeleton,
+  LaySkeletonItem,
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -142,6 +146,8 @@ const install = (app: App, options?: InstallOptions): void => {
 }
 
 export {
+  LaySkeleton,
+  LaySkeletonItem,
   LayRadio,
   LayIcon,
   LayButton,

src/module/skeleton/index.less

@@ -0,0 +1,72 @@
+.lay-skeleton{
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+  .lay-skeleton-type--p{
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+
+  .lay-skeleton-type--image{
+    width: 240px;
+    height: 240px;
+    background: #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i{
+      font-size: 40px;
+    }
+  }
+}
+
+.lay-skeleton-animated {
+  .lay-skeleton-type--image{
+    width: 240px;
+    height: 240px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i{
+      font-size: 40px;
+    }
+  }
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+    background: linear-gradient(
+            90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
+    background-size: 400% 100%;
+    animation: lay-skeleton-loading 1.2s ease infinite;
+  }
+
+
+}
+
+
+.lay-skeleton-first {
+  width: 30%;
+}
+
+.lay-skeleton-last {
+  width: 62.8%;
+}
+
+
+
+@keyframes lay-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}

src/module/skeleton/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySkeleton', Component)
+}
+
+export default Component as IDefineComponent

src/module/skeleton/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+    <template v-if="loading">
+      <slot name="skeleton">
+        <lay-skeleton-item
+            v-for="item in rows"
+            :class="[
+              item===1? 'lay-skeleton-first': '',
+              item === rows? 'lay-skeleton-last': '']"
+            type="p"
+        ></lay-skeleton-item>
+      </slot>
+    </template>
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script setup name="LaySkeleton" lang="ts">
+import LaySkeletonItem from '../skeletonItem/index.vue'
+import './index.less'
+import { defineProps, withDefaults} from "vue";
+
+export interface LaySkeletonProps {
+  rows?: number;
+  loading?: boolean;
+  animated?: boolean;
+}
+
+const props = withDefaults(defineProps<LaySkeletonProps>(), {
+  rows: 4,
+  loading: false,
+  animated: false,
+});
+</script>-

src/module/skeletonItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySkeletonItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/skeletonItem/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
+    <div v-if="type==='image'" >
+      <lay-icon type="layui-icon-picture"></lay-icon>
+    </div>
+  </div>
+</template>
+
+<script setup name="LaySkeletonItem" lang="ts">
+import { defineProps, withDefaults} from "vue";
+
+export interface LaySkeletonProps {
+  type?: string;
+}
+
+const props = withDefaults(defineProps<LaySkeletonProps>(), {
+  type: 'p',
+});
+</script>-