扩展组件

扩展组件是指那些不便于收录到通用组件中(通常是因为组件的业务性无法完全剥离,或者是组件只有在某些项目下才会被用到,通用性不大),但因为结构复杂,或者有一些技术难点的存在,仍值得参考的组件。因此这里展示的扩展组件都仅作参考作用,QMUI 主源码中并不提供这些组件。

CSS Sprite 自动合并

QMUI 1.x 版本提供了一套基于 Compass 的自动 CSS Sprite 的扩展组件,从 2.0.0 版本开始弃用,改为更加方便使用的基于 Node.js 的雪碧图方案。若项目中仍需要使用该扩展组件,可以参考这里

等高左右双栏

展示(实现方式1):

扩展组件 - 图1

  • 采用 table-cell 原理实现,缺点是会受到 table-cell 固有缺陷的限制,比如 table-cell 本身无法固定宽度。

展示(实现方式2):

扩展组件 - 图2

采用特殊 padding + margin 实现,缺点是外层容器需设置 overflow: hidden,而这通常会阻碍容器内部的下拉菜单伸出外容器。

文件上传按钮

展示:

扩展组件 - 图3

  • 内部包裹有一个"file"类型的 input,但这种类型的 input 有部分区域是无法实现 cursor: pointer 效果的,因此需要像此例中一样,设法将不可自定义鼠标的区域移到包裹容器外部。

树状选择菜单

展示:

扩展组件 - 图4

  • 比较繁琐的是 checked 状态下的背景色块的位置相关的样式设置