luckysheet的使用——07.二次开发自动插入批注功能

在单元格编辑完成后，需要自动在这个单元格上新增批注，此时需要改造旧代码，首先找到路径为
src/controllers/postil.js的文件，找到新增批注时触发的方法，如下：

2.对方法进行改造，新增传入变量comment，用于自动插入的批注：

3.在这个方法内新增判断，用于判断comment是否有值，有则为自动插入的方式：

4.修改批注的弹框静态元素，插入comment：

let html = '<div id="luckysheet-postil-show_' + r + '_' + c + '" class="luckysheet-postil-show luckysheet-postil-show-active">' +'<canvas class="arrowCanvas" width="' + size[2] + '" height="' + size[3] + '" style="position:absolute;left:' + size[0] + 'px;top:' + size[1] + 'px;z-index:100;pointer-events:none;"></canvas>' +'<div class="luckysheet-postil-show-main" style="width:' + width + 'px;height:' + height + 'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:' + fromX + 'px;top:' + fromY + 'px;box-sizing:border-box;z-index:100;">' +'<div class="luckysheet-postil-dialog-move">' +'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-b" data-type="b"></div>' +'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-l" data-type="l"></div>' +'</div>' +'<div class="luckysheet-postil-dialog-resize">' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lt" data-type="lt"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mt" data-type="mt"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lm" data-type="lm"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rm" data-type="rm"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rt" data-type="rt"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lb" data-type="lb"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mb" data-type="mb"></div>' +'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rb" data-type="rb"></div>' +'</div>' +'<div style="width:100%;height:100%;overflow:hidden;">' +'<div class="formulaInputFocus" style="width:132px;height:72px;line-height:20px;box-sizing:border-box;text-align: center;word-break:break-all;" spellcheck="false" contenteditable="true">' + comment +'</div>' +'</div>' +'</div>' +'</div>';

5.找到路径为src/global/api,js的文件，该文件为对外公开方法的js，此时我们在这里新增自动插入批注的方法：

6.回到我们的前端项目，在整体配置中的hook编写单元格编辑完成后的钩子函数：

luckysheet的使用——07.二次开发自动插入批注功能相关推荐

陈伯雄lisp_基于AutoLisp的AutoCAD二次开发自动生成系统图
龙源期刊网 http://www.qikan.com.cn 基于 AutoLisp 的 AutoCAD 二次开发自动生成系统图作者:郎建山金江来源:<科技视界> 2013 年第 2 ...
CAD自控lisp_基于AutoLisp的AutoCAD二次开发自动生成系统图
基于 AutoLisp 的 AutoCAD 二次开发自动生成系统图 [摘要]本文主要阐述了应用 autolisp 语言二次开发 autocad 自动生成系统图的实现方案. [关键词] autocad ...
cad通过钢筋大样生成钢筋明细表插件_Revit二次开发——自动生成构件图（总结）...
之前测试导出构件图的功能实现,拆分了各模块分布进行测试:Revit二次开发--一键导出构件图(1) Revit二次开发--叠合板自动配筋(2) Revit二次开发--自动标注钢筋思路(3) 本篇为这个 ...
Revit二次开发——自动生成构件图（总结）
之前测试导出构件图的功能实现,拆分了各模块分布进行测试: Revit二次开发--一键导出构件图(1) Revit二次开发--叠合板自动配筋(2) Revit二次开发--自动标注钢筋思路(3) 本篇为这 ...
cad二次开发——自动运行dll，加载菜单（收集）
1.自动加载dll的方法(个人觉得下面第4个方法会更方便) cad加载dll_实现CAD插件启动自动加载的三种方法_weixin_39774556的博客-CSDN博客从网上或者别处淘来的CAD插件,效 ...
微信公众号二次开发可以做哪些功能？
微信公众平台现在很多商家企业都在使用,但如何通过微信公众平台展现自己企业的特色和优势,给客户提供更多便利功能,进而通过微信公众平台为企业带来更多的益处呢? 这是众多使用微信公众平台的商家企业需要深入思 ...
AE二次开发中几个功能速成归纳（符号设计器、创建要素、图形编辑、属性表编辑、缓冲区分析）...
/** 实习课上讲进阶功能所用文档,因为赶时间从网上抄抄改改,凑合能用,记录一下以备个人后用.** -------------------------------------------------- ...
微信公众号二次开发可以做哪些功能
微信公众平台现在很多商家企业都在使用,但如何通过微信公众平台展现自己企业的特色和优势,给客户提供更多便利功能,进而通过微信公众平台为企业带来更多的益处呢? 这是众多使用微信公众平台的商家企业需要深入思 ...
C#进行AutoCAD二次开发实例之倒角功能实现原理介绍
内容提要: 今天又是周五,到了双休的日子,比较兴奋,看了一晚上的<最强大脑>,顿时赶脚智商成了硬伤...刚才躺下打算睡觉,觉得还是应该写写CAD二次开发的相关一些内容,原因 ...

luckysheet的使用——07.二次开发自动插入批注功能

luckysheet的使用——07.二次开发自动插入批注功能相关推荐

最新文章

热门文章