Day13 鼠标右键菜单复制粘贴

返回目录

 

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

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

 

今天，我们为单元格区域添加鼠标右键菜单，并且在菜单上增加复制、粘贴选项，由于粘贴使用的是javascript的paste事件，所以目前只能通过键盘的ctrl+v进行处理，无法响应到鼠标右键的paste选项，具体效果如下：

 

 

1.修改文件：

1.1. controllers/constant.js: 增加函数rightclickHTML()，定义了鼠标右键菜单项的两个选单，copy和paste；

1.2.global/createdom.js: 在页面初始化阶段，通过 .append(),把1.1.定义的 右键菜单元素追加到 body上面；

1.3.util.util.js: showrightclickmenu()这个方法通过修改元素样式，在界面把右键菜单显示出来；

1.4.controllers/handler.js: 在单元格区域增加 .mouseup()，在鼠标右键弹起的时候，调用1.3定义的方法，把右键菜单显示出来；

1.5.优化性调整：在 luckySheetl里面，存在比较多的循环依赖关系，导致文件之间的调用关系错综复杂，维护起来比较困难。通过新建一个 utils/format.js ，我们把之前handler.js和 setdata.js的循环依赖解开，达到逻辑更加清晰的目的。