luckysheet二次开发-单元格斜线功能

需求

　　1. 在工具栏添加一个单元格斜线图标

　　

　　2. 点击图标弹出对话框，收集信息（单元格范围、单元格内容，起始位置）

      

 

 

　　3. 将收集的内容及规则作用到单元格中

　　

 

 

准备

　　1. 下载源码，https://gitee.com/mengshukeji/Luckysheet

　　2. 安装依赖，启动项目，npm install；npm run dev

实现

　　在工具栏添加一个单元格斜线图标

　　1.找到工具栏文件src\controllers\toolbar.js；

　　　　1.1 配置工具栏id映射关系

　　　　

　　　　1.2 添加图标模板，在createToolbarHtml方法下htmlMap属性中（图一），修改对应变量（图二）

　　　　

　　　　

　　　　1.3【避坑】根据交互不同，选择不同模板代码，大致可分两类"单一的"和"带下拉选项的"

　　　　  以下是对应的代码结构

<div class="luckysheet-toolbar-button-split-left luckysheet-toolbar-button luckysheet-inline-block"
        data-tips="${toolbar.splitColumn}" id="luckysheet-splitColumn-btn-title" role="button"
        style="user-select: none;">
        <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block" style="user-select: none;">
            <div class="luckysheet-toolbar-menu-button-inner-box luckysheet-inline-block" style="user-select: none;">
                <div class="luckysheet-toolbar-menu-button-caption luckysheet-inline-block" style="user-select: none;">
                    <div class="luckysheet-icon luckysheet-inline-block " style="user-select: none;">
                        <div aria-hidden="true"
                            class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-rotation-none iconfont luckysheet-iconfont-wenbenfenge"
                            style="user-select: none;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

　　　　以下是对应的代码结构

<div class="luckysheet-toolbar-select luckysheet-toolbar-menu-button luckysheet-inline-block"
        data-tips="${toolbar.print}" id="luckysheet-icon-print" role="button" style="user-select: none;">
        <div class="luckysheet-toolbar-menu-button-outer-box luckysheet-inline-block" style="user-select: none;">
            <div class="luckysheet-toolbar-button-inner-box luckysheet-inline-block" style="user-select: none;">

                <div class="luckysheet-icon luckysheet-inline-block " style="user-select: none;">
                    <div aria-hidden="true"
                        class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-autofilter iconfont luckysheet-iconfont-dayin"
                        style="user-select: none;">
                    </div>
                </div>
                <div class="luckysheet-toolbar-menu-button-dropdown luckysheet-inline-block iconfont luckysheet-iconfont-xiayige"
                    style="user-select: none;margin-left: 0px;margin-right: 4px;">
                </div>
            </div>
        </div>
    </div>

　　2. 找到src\assets\iconfont\iconfont.css文件

　　　　2.1 下载新字体图标文件包

　　　　2.2 将新字体图标文件及代码，引入到原项目中

　　　　2.3 修改图标模板代码里的icon类名

　　　　

　　　　参考：https://blog.csdn.net/qq_42174597/article/details/128837855

　　3. 找到src\locale\zh.js文件

　　　　3.1 配置图标提示文本，toolbar属性中

　　　　

　　4.找到src\controllers\toolbar.js文件

　　　　4.1 配置工具项id，配置后就可以在工具栏中显示了（工具项id位置顺序，决定了工具栏中排序）

　　　　

　　点击图标弹出对话框，收集信息（单元格范围、单元格内容，起始位置）

　　1.找到src\controllers\handle.js文件

　　 　  1.1 添加工具项点击事件

　　　　

　　2. 添加src\controllers\cellDiagonal.js文件，

　　　　1.1 创建弹框