Day21 工具条设置单元格颜色

返回目录

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

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

 

今天，我们首先对代码进行优化，menuButton.js文件长度 800+，我们入手这个文件的优化，把一些静态资源剥离出来。

 

新增文件：

1.model/mergeCell.js:首先从 menuButton.js剥离出来的是 合并单元格相关的三个方法，我们新建一个JS文件来管理他们，未来我们如果需要对合并单元格的方法进行扩展，修改这个文件就可以了。

2.model/updateFormat.js:同样，关于单元格格式相关的标签解析处理，我们也单独新建一个JS文件进行管理。

3.utils/menuItems.js:在menuButton.js里面，我们同样看到工具菜单选项这些静态参数，我们把他们单独出来成为一个JS文件。

 

4.menuButtonDom.js:最后对于工具条按钮的样式修改，我们单独成一个JS文件。

 

通过上面的优化处理，我们的menuButton.js 代码规模降低到300+，可读性和可维护性更加优秀。

 

接下来，进入今天的主题，在菜单项增加单元格背景色的设置支持，具体效果如下：

 

包括工具条按钮、菜单选单挑选颜色和初始化颜色、自定义颜色选单，三部分功能：

修改文件：

1.utils/constant.js: 增加单元格颜色按钮和 单元格颜色下拉选单 两个dom

 

2.controllers/menuButton.js: 增加两个dom的click事件方法，

 

同时，新增一个 refreshFormat() 方法，在更新flowdata数据后，刷新页面。

 

增加 popupMenu() ，封装工具栏下拉选单处理

 

3.view/cleargridelement.js: clearmenuelement() 增加调色板下拉选单的隐藏。

 

今天内容到此为止，下一篇文章将是本系列终篇。