使用使用vue实现实现grid-layout功能实例代码功能实例代码
主要介绍了使用vue实现grid-layout功能的代码讲解,需要的朋友可以参考下
1.先clone项目到本地。
2.git reset --hard commit 命令可以使当前head指向某个commit。
完成完成html的基本布局的基本布局
点击复制按钮来复制整个commit id。然后在项目根路径下运行 git reset 。用浏览器打开index.html来预览效果，该插件的html
主要结果如下：
<!-- 节点容器 -->
<div class="dragrid">
<!-- 可拖拽的节点，使用translate控制位移 -->
<div class="dragrid-item" style="transform: translate(0px, 0px)">
<!-- 通过slot可以插入动态内容 -->
<div class="dragrid-item-content">
</div>
<!-- 拖拽句柄 -->
<div class="dragrid-drag-bar"></div>
<!-- 缩放句柄 -->
<div class="dragrid-resize-bar"></div>
</div>
</div>
使用使用vue完成完成nodes简单排版简单排版
先切换commit，安装需要的包，运行如下命令：
git reset --hard 83842ea107e7d819761f25bf06bfc545102b2944
npm install
<!-- 启动，端口为7777，在package.json中可以修改 -->
npm start
这一步一个是搭建环境，这个直接看webpack.config.js配置文件就可以了。
另一个就是节点的排版（layout），主要思路是把节点容器看成一个网格，每个节点就可以通过横坐标(x)和纵坐标(y)来控制
节点的位置，左上角坐标为(0, 0)；通过宽(w)和高(h)来控制节点大小；每个节点还必须有一个唯一的id。这样节点node的数据
结构就为：
{
id: "uuid",
x: 0,
y: 0,
w: 6,
h: 8
}
其中w和h的值为所占网格的格数，例如容器是24格，且宽度为960px，每格宽度就为40px，则上面节点渲染为240px *
320px, 且在容器左上角。
来看一下dragrid.vue与之对应的逻辑：
computed: {
cfg() {
let cfg = Object.assign({}, config);
cfg.cellW = Math.floor(this.containerWidth / cfg.col);
cfg.cellH = cfg.cellW; // 1:1
return cfg;
}
},
methods: {
getStyle(node) {
return {
width: node.w * this.cfg.cellW + 'px',
height: node.h * this.cfg.cellH + 'px',
transform: "translate("+ node.x * this.cfg.cellW +"px, "+ node.y * this.cfg.cellH +"px)"
};
}
}
其中cellW、cellH为每个格子的宽和高，这样计算节点的宽和高及位移就很容易了。
评论0