skeleton-plus《骨架屏》

Skeleton是一个基于vue3和vite开发的一个骨架屏插件，不仅仅支持PC端的，还支持移动端所有设备的自动适配，同时允许自定义骨架屏所有样式，可以轻松使用。

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 vite 打包工具配合使用。

npm i skeleton-plus

使用方法

项目的主入口文件：main.ts

import SkeletonPlus from 'skeleton-plus'
import 'skeleton-plus/es/index.css'
app.use(SkeletonPlus, {mode: 'DEVELOPMENT', dataPath:"./public" });

使用plugin插件

在线项目的vite.config.ts，引用plugin插件

import { skeletonPlugin } from 'skeleton-plus/plugin';
export default defineConfig({
  plugins: [
      skeletonPlugin({dataPath:'./public'})
  ]
})

在页面里面使用

<template>
  <Skeleton ref="skeletonRef" moduleKey="app">
    <div class="container">
      这是Skeleton《骨架屏》例子
    </div>
  </Skeleton>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useSkeletonStore } from "skeleton-plus";
const skeletonRef = ref(null);
onMounted(() => {
  setTimeout(() => {
    if(skeletonRef.value){
      skeletonRef.value.debut();
    }
  }, 3000);
});
</script>

参数说明

skeleton-plus

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | mode | 开发模式 | string | DEVELOPMENT | | dataPath | 静态数据路径，全站也只能使用统一个，如果不使用customGetDateRequest和customSaveDataRequest，必须和plugin插件的dataPath保持一致| string | - | | moduleKey | 模块标识，用于保存骨架屏的数据，必须是唯一性 | string | - | | layout | PC的版心，移动端的时候是可以不用传的 | number | 0 | | event | 触发事件 | string | onMousedown | | rootFontSize | 根节点的字体大小，默认为PC的16px，移动端需要根据设计稿来设置 | number | 16 | | customFit | 自定义适配，如果配置了，就会启用自定义 | function | - | | customGetDateRequest | 自定义获取骨架屏数据请求，customGetDateRequest 和 customSaveDataRequest 是一起使用的| function | - | | customSaveDataRequest | 自定义保存骨架屏数据请求，customSaveDataRequest 和 customGetDateRequest 是一起使用的 | function | - |

plugin

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | dataPath | 静态数据路径，全站也只能使用统一个。如果不使用customGetDateRequest和customSaveDataRequest，必须和skeleton-plus的dataPath保持一直| string | - |