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