npm 包 zax-skeleton 使用教程

阅读时长 3 分钟读完

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

安装与引用

通过 npm 安装:

在项目中引用:

基本使用

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

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

配置项

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

el

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

exclude

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

backgroundColor

骨架屏背景色。

loadingTemplate

loading 骨架屏模板。

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

errorTemplate

错误骨架屏模板。

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

按需加载

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

结语

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

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

纠错
反馈