雪碧图处理

QMUI 中集成了基于 postcss-lazysprite 和 postcss-svg-sprite 的雪碧图自动处理，使用时只需要在 UI_dev/project/images 中建立一个图片文件夹，把需要的图片放入，QMUI 会按规则生成所有的 CSS 以及雪碧图文件。以本 Demo 中使用到的雪碧图为例，创建时需要如下步骤：

在 UI_dev/project/images 中建立 icons 和 svgIcon 目录，分别放置所需的普通图片和 SVG 图片。

在样式文件需要输出雪碧图 CSS 的地方添加如下代码：

  1. @lazysprite "icons#icon"; /* 普通图片 */
  2. @svgsprite "svgIcon"; /* SVG 图片 */

执行编译后会输出如下样式：

  1. /* 普通图片输出 */
  2. .dm_icon{
  3.     display: inline-block;
  4.     overflow: hidden;
  5.     font-size: 0;
  6.     line-height: 0;
  7. }
  8. .dm_icon_BannerLogo {
  9.     background-image: url(../images/icons.7fc7e2bab2.png);
  10.     background-position: 0 0;
  11.     width: 160px;
  12.     height: 160px;
  13. }
  14. .dm_icon_BannerMobileLogo {
  15.     ...
  16. }
  17. /* SVG 图片输出 */
  18. .dm_svgIcon {
  19.     background: url("../images/svgIcon.svg") left top no-repeat;
  20.     display: inline-block;
  21.     overflow: hidden;
  22.     font-size: 0;
  23.     line-height: 0;
  24.     vertical-align: top;
  25. }
  26. .dm_svgIcon_AppExmail {
  27.     width: 40px;
  28.     height: 40px;
  29.     background-position: -128px -122px;
  30. }
  31. .dm_svgIcon_AppPermissionWorknote {
  32.     ...
  33. }

使用 icon 只需在 HTML 中使用对应的 class：

  • 可以看出输出的 Class-name 由项目前缀 + 目录名 + 图片名组成。
  • “icons#icon” 中的 icon 表示目录名缩写，设置了该目录名缩写则输出的 class 中使用该缩写，不设置则默认使用目录名。
  • 普通图片多倍图处理只需要在 icons 目录中加入文件名带 "_2x/@2x"，“_3x/@3x” 这类后缀的多倍图文件即可，框架也会自动输出对应的样式以及雪碧图文件。
  • 如需定制雪碧图功能，可以分别查看 postcss-lazysprite 的 options 和 postcss-svg-sprite 的 options，根据需要自行调整 QMUI 的相关源码。
  • 完整的雪碧图效果展示页面请浏览 Sprite Demo。