一个网格式布局组件,基于 Vue 2.0 实现,兼容 Weex 平台。
CSS 里已经有了网格布局的规范,但是学习难度很大,有一二十个属性。而且 CSS 语法的表达能力有限,描述这种复杂布局,的确有点难为它了。
因为和 grid 规范不一样,所以暂且将组件命名成 mesh。
- 能够方便的写复杂布局,借鉴了 CSS Grid 布局规范。
- 减少标签的嵌套层次,能够优化移动端的渲染性能。
- 不依赖 CSS 实现,没有 CSS 的解析负担。
如果想实现如下布局效果:
用 CSS 写是这样的(CodePen):
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
<style>
/* 仅保留了 grid 相关的样式 */
.container {
display: grid;
width: 300px;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
}
.a {
grid-column: 1 / 3;
grid-row: 1;
}
.b {
grid-column: 3;
grid-row: 1 / 3;
}
.c {
grid-column: 1 / 3;
grid-row: 2 ;
}
</style>
如果使用 <mesh>
组件写是这样的:
<mesh width="300" column="3" layout="2,1|1,2|2,1">
<div>A</div>
<div>B</div>
<div>C</div>
</mesh>
如果能把它转换成 CSS 的话,可以写成(自创语法,用来做对比,没有浏览器兼容):
.container {
width: 300px;
mesh-column: 3;
mesh-layout: "2,1|1,2|2,1";
}
代码封装成了 Vue 插件,使用 Vue.use
安装(在浏览器环境中会自动安装)。
import mesh from 'weex-component-mesh'
Vue.use(mesh)
安装之后会在全局注册 <mesh>
组件,和正常 Vue 组件一样使用即可。
网格的宽度,接受字符串或者数字,不需要带单位,默认是 750px。
网格列数,默认是 12。
网格组件之间的间距,默认是 0。
描述网格布局,必选,字符串或者二维数组。
如果是字符串,则使用 |
分割组件,用 ,
分割组件的宽高。如 "2,1|1,2|2,1"
表示有三个格子,第一个格子的宽是 2,高是 1;第二个格子的宽是 1,高是 2;第三个格子的宽是 2,高是 1。
分割符之间可以有任意空格,"2,1|1,2|2,1"
和 "2, 1 | 1, 2 | 2, 1"
等价。
二维数组 [[2,1],[1,2],[2,1]]
和字符串 "2,1|1,2|2,1"
等价。
组件遵循 “最靠上且最靠左” 的原则排列,排列顺序参考下图。
column = 12
layout = "10,2 | 3,3 | 3,3 | 4,2 | 4,3 | 6,2"
:
mesh 组件支持嵌套:
<mesh width="640" column="4" layout="4,1|1,3|3,3">
<div>A</div>
<div>B</div>
<mesh column="2" layout="2,1|1,1|1,1">
<div>C</div>
<div>D</div>
<div>E</div>
</mesh>
</mesh>
效果如下图:
参考 examples 目录下的例子。
- 要确保网格能够被填满,而且不存在重叠部分。