Day22 行高和列宽的设置

返回目录

 

以下知识源码位置: [Git:  https://gitee.com/zhouweng/mini_sheet  version=57b9e280346579fe061b4671fbf2c7ed245fab50]

源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]

 

    时间很快，一转眼就到了这个系列最后一篇文章，通过luckysheet这个优秀的前端开源项目，我们可以学习到很多前端开发的知识。

作为一名学校教育语文长期不及格的劣质毕业生，能够憋出这么多文章实属不易，未来不断提升自己的写作水平吧。

 

    进入今天的内容，设置单元格的行高和列宽，效果如下：

 

1.新增文件：

1.1.rowColumnOperation.js: 改变单元格行列尺寸的逻辑还是稍微有点复杂的，代码量300+，主要是对下面三个标签的mousedown/mouseleave/mouseup

#luckysheet-rows-h #luckysheet-cols-h-c #luckysheet-rows-change-size #luckysheet-cols-change-size

基本逻辑是 mousedown 事件增加一条蓝色的指标线， mouseleave 隐藏指标线， mouseup 真正干活儿并刷新页面

 

2.修改文件：

2.1. utils/constant.js: 主要是增加几个用于变更尺寸的标签：

 

2.2.controllers/handler.js : 在整个document 响应鼠标移动mousemove事件的时候，通过一大堆 status 屏蔽掉 变更单元格尺寸的事件

 

2.3.store/index.js:  增加变更尺寸相关的四个控制和数据变量

 

2.4.core.js: 最后是把 rowColumnOperationInitial() 在页面初始化的时候调用起来，齐活儿。

 

 

最后，本系列今天正式结束，luckysheet还有很多精彩的功能，等待我们继续去探索学习。