Day14 在页面顶部显示工具条

返回目录

 

 

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

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

 

今天，我们为页面增加工具栏，也就是下面红框的几个按钮，具体按钮的实现不在这个版本实现：

 

0.基础知识：我们这里工具条的按钮，用到的矢量图标，使用的方法是 constant.js 通过 html元素的class，调用 src/assets/iconfont/iconfont.css，引入图标样式

 

参考 https://www.iconfont.cn/  阿里巴巴矢量图标库

 

1.修改文件：

1.1.index.html:增加对iconfont的css引用;

    <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />

1.2.store/index.js: 增加toolbarHeight参数，默认是40px

1.3.controllers/constant.js: 在body增加 id="luckysheet-wa-editor" ； 增加 menuToolBar() 构造工具条的HTML元素

1.4.controllers/resize.js: luckysheetsizeauto() 函数里面预留 工具条的高度

    $("#" + Store.container).find(".luckysheet-grid-container").css("top", Store.toolbarHeight );

1.5.controllers/updateCell.js:  input_postition的max-width扣减掉工具条的高度

     "max-width": winW + scrollLeft - col_pre - 20 - Store.rowHeaderWidth - Store.toolbarHeight,

1.6.global/location.js: mouseposition()的 newY扣减掉工具条的高度

       newY = y - container_offset.top  - Store.columnHeaderHeight - Store.toolbarHeight;

1.7.global/createdom.js: 在页面初始化阶段，把工具条的元素展开

       gh = replaceHtml(gh, { "menu": menuToolBar() });

 

2.新增文件夹：src目录下，增加 iconfont 文件夹