npm 包 zax-skeleton 使用教程-JavaScript中文网-JavaScript教程资源分享门户

zax-skeleton 是一款轻量级的前端骨架屏生成器，使用简单，可快速为页面生成有选择性的骨架屏。

安装与引用

通过 npm 安装：

npm install zax-skeleton --save-dev

在项目中引用：

import zaxSkeleton from 'zax-skeleton';

基本使用

以下为一个最简单的示例：

zaxSkeleton({
  el: '#app',
  exclude: ['.ignore', '#branding'],
});

通过 el 指定挂载节点，exclude 参数指定需要忽略骨架屏的元素。

配置项

zax-skeleton 有多项参数可供配置：

el

挂载节点，支持 CSS 选择器字符串。

zaxSkeleton({
  el: '#app',
});

exclude

需要排除生成骨架屏的元素，支持 CSS 选择器字符串或数组。

zaxSkeleton({
  el: '#app',
  exclude: ['.ignore', '#branding'],
});

backgroundColor

骨架屏背景色。

zaxSkeleton({
  el: '#app',
  backgroundColor: '#f2f2f2',
});

loadingTemplate

loading 骨架屏模板。

-- -------------------- ---- -------
-------------
  --- -------
  ---------------- -
    ---- -------------
      ---- --------------------------------
      ---- ---------------------- ----------------------------
    ------
  --
---

errorTemplate

错误骨架屏模板。

-- -------------------- ---- -------
-------------
  --- -------
  -------------- -
    ---- ----------- -------
      ---- --------------------------------
      ---- ----------------------- --------- ---- ------------
    ------
  --
---

按需加载

通过 loadSkeleton 方法可手动触发骨架屏的生成与展示，便于按需加载。

const skeleton = zaxSkeleton({
  el: '#app',
});

skeleton.loadSkeleton();

结语

zax-skeleton 是一个非常实用的前端骨架屏生成器，在快速构建 SPA 应用时非常方便，如果你在开发过程中遇到过骨架屏的问题，不妨尝试一下该 npm 包！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600563cc81e8991b448e1280