From 2dddfaa8f1a13476f512db0e0d27742ebebb7f35 Mon Sep 17 00:00:00 2001 From: lrz <1414556676@qq.com> Date: Tue, 15 Sep 2020 15:21:36 +0800 Subject: [PATCH] fix(image,config): image,config 1. copy excel to luckysheet,get image 2.config add hooks --- docs/guide/FAQ.md | 7 +- docs/zh/guide/FAQ.md | 7 +- docs/zh/guide/config.md | 465 ++++++++++++++++++++++++++++++++++--- src/controllers/handler.js | 25 +- 4 files changed, 453 insertions(+), 51 deletions(-) diff --git a/docs/guide/FAQ.md b/docs/guide/FAQ.md index 56c6ad0..7e7ba8e 100644 --- a/docs/guide/FAQ.md +++ b/docs/guide/FAQ.md @@ -24,9 +24,12 @@ luckysheet.buildGridData(luckysheetfile) ------------ -## **Q** How to use Luckysheet in vue project? +## **Q** How to use Luckysheet in Vue/React project? -**A** : Reference [Luckysheet-vue-demo](https://github.com/Dushusir/vue-demo) +**A**: + +- Vue case: [luckysheet-vue](https://github.com/mengshukeji/luckysheet-vue) +- React case: [luckysheet-react](https://github.com/mengshukeji/luckysheet-react) ------------ diff --git a/docs/zh/guide/FAQ.md b/docs/zh/guide/FAQ.md index 164fb98..d28f312 100644 --- a/docs/zh/guide/FAQ.md +++ b/docs/zh/guide/FAQ.md @@ -24,9 +24,12 @@ luckysheet.buildGridData(luckysheetfile) ------------ -## **Q** 如何在vue项目中使用Luckysheet？ +## **Q** 如何在Vue/React项目中使用Luckysheet？ -**A** : 参考 [Luckysheet-vue-demo](https://github.com/Dushusir/vue-demo) +**A** :  + +- Vue案例：[luckysheet-vue](https://github.com/mengshukeji/luckysheet-vue) +- React案例：[luckysheet-react](https://github.com/mengshukeji/luckysheet-react) ------------ diff --git a/docs/zh/guide/config.md b/docs/zh/guide/config.md index 4e821b1..0b0e1be 100644 --- a/docs/zh/guide/config.md +++ b/docs/zh/guide/config.md @@ -179,6 +179,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### showtoolbarConfig + +[todo] + - 类型：Object - 默认值：{} - 作用：自定义配置工具栏 @@ -233,6 +236,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### showsheetbarConfig + +[todo] + - 类型：Object - 默认值：{} - 作用：自定义配置底部sheet页按钮 @@ -253,6 +259,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### showstatisticBarConfig + +[todo] + - 类型：Object - 默认值：{} - 作用：自定义配置底部计数栏 @@ -265,6 +274,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### sheetBottomConfig + +[todo] + - 类型：Object - 默认值：{} - 作用：sheet页下方的添加行按钮和回到顶部按钮配置 @@ -355,6 +367,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### cellRightClickConfig + +[todo] + - 类型：Object - 默认值：{} - 作用：自定义配置单元格右击菜单 @@ -377,6 +392,9 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ------------ ### sheetRightClickConfig + +[todo] + - 类型：Object - 默认值：{} - 作用：自定义配置sheet页右击菜单 @@ -401,7 +419,8 @@ Luckysheet开放了更细致的自定义配置选项，分别有 钩子函数统一配置在`options.hook`下，可以分别针对单元格、sheet页、表格创建配置hook。 ------------- +## 单元格 + ### cellRenderAfter - 类型：Function - 默认值：null @@ -422,88 +441,303 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - {Object} [v]: 单元格对象 ------------ -### cellClickBefore +### cellEditBefore - 类型：Function - 默认值：null -- 作用：点击单元格前触发，即在点击单元格的时候，最先触发这个方法 +- 作用：双击单元格后触发，即在双击单元格编辑内容的时候，最先触发这个方法 - 参数： - {Number} [r]: 单元格所在行数 - {Number} [c]: 单元格所在列数 - {Object} [v]: 单元格对象 ------------ -### cellClicked +### cellEditAfter - 类型：Function - 默认值：null -- 作用：点击单元格后触发，即在点击单元格的时候，最后触发这个方法 +- 作用：双击单元格后触发，即在双击单元格编辑内容的时候，最后触发这个方法 - 参数： - {Number} [r]: 单元格所在行数 - {Number} [c]: 单元格所在列数 - - {Object} [v]: 单元格对象 + - {Object} [oldV]: 修改前单元格对象 + - {Object} [newV]: 修改后单元格对象 ------------ -### cellEditBefore +### fireMousedown - 类型：Function - 默认值：null -- 作用：双击单元格后触发，即在双击单元格编辑内容的时候，最先触发这个方法 +- 作用：单元格数据下钻自定义方法 + +------------ + +## 选区 + +### rangeSelectBefore +- 类型：Function +- 默认值：null +- 作用：框选或者设置选区前触发 - 参数： - - {Number} [r]: 单元格所在行数 - - {Number} [c]: 单元格所在列数 - - {Object} [v]: 单元格对象 + - {Object || Array} [range]: 选区范围，可能为多个选区 ------------ -### cellEdited +### rangeSelectAfter - 类型：Function - 默认值：null -- 作用：双击单元格后触发，即在双击单元格编辑内容的时候，最后触发这个方法 +- 作用：框选或者设置选区后触发 - 参数： - - {Number} [r]: 单元格所在行数 - - {Number} [c]: 单元格所在列数 - - {Object} [oldV]: 修改前单元格对象 - - {Object} [newV]: 修改后单元格对象 + - {Object || Array} [range]: 选区范围，可能为多个选区 + +------------ +### rangeMoveBefore +- 类型：Function +- 默认值：null +- 作用：移动选区前，包括单个单元格 +- 参数： + - {Array} [range]: 当前选区范围，只能为单个选区 + +------------ +### rangeMoveAfter +- 类型：Function +- 默认值：null +- 作用：移动选区后，包括单个单元格 +- 参数： + - {Array} [oldRange]: 移动前当前选区范围，只能为单个选区 + - {Array} [newRange]: 移动后当前选区范围，只能为单个选区 + +------------ +### rangeEditBefore +- 类型：Function +- 默认值：null +- 作用：选区修改前 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [data]: 选区范围所对应的数据 + +------------ +### rangeEditAfter +- 类型：Function +- 默认值：null +- 作用：选区修改后 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [oldData]: 修改前选区范围所对应的数据 + - {Object} [newData]: 修改后选区范围所对应的数据 + +------------ +### rangeCopyBefore +- 类型：Function +- 默认值：null +- 作用：选区复制前 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [data]: 选区范围所对应的数据 + +------------ +### rangeCopyAfter +- 类型：Function +- 默认值：null +- 作用：选区复制后 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [data]: 选区范围所对应的数据 + +------------ +### rangePasteBefore +- 类型：Function +- 默认值：null +- 作用：选区粘贴前 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [data]: 要被粘贴的选区范围所对应的数据 + +------------ +### rangePasteAfter +- 类型：Function +- 默认值：null +- 作用：选区粘贴后 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [originData]: 要被粘贴的选区范围所对应的数据 + - {Object} [pasteData]: 要粘贴的数据 + +------------ +### rangeCutBefore +- 类型：Function +- 默认值：null +- 作用：选区剪切前 +- 参数： + - {Array} [range]: 选区范围，只能为单个范围 + - {Object} [data]: 要被剪切的选区范围所对应的数据 + +------------ +### rangeCutAfter +- 类型：Function +- 默认值：null +- 作用：选区剪切后 +- 参数： + - {Array} [range]: 选区范围，只能为单个范围 + - {Object} [data]: 被剪切的选区范围所对应的数据 + +------------ +### rangeDeleteBefore +- 类型：Function +- 默认值：null +- 作用：选区删除前 +- 参数： + - {Array} [range]: 选区范围，只能为单个范围 + - {Object} [data]: 要被删除的选区范围所对应的数据 + +------------ +### rangeDeleteAfter +- 类型：Function +- 默认值：null +- 作用：选区删除后 +- 参数： + - {Array} [range]: 选区范围，只能为单个范围 + - {Object} [data]: 被删除的选区范围所对应的数据 + +------------ +### rangeClearBefore +- 类型：Function +- 默认值：null +- 作用：选区清除前 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [data]: 要被清除的选区范围所对应的数据 + +------------ +### rangeClearAfter +- 类型：Function +- 默认值：null +- 作用：选区清除后 +- 参数： + - {Object || Array} [range]: 选区范围，可能为多个选区 + - {Object} [data]: 被清除的选区范围所对应的数据 + +------------ +### rangePullBefore +- 类型：Function +- 默认值：null +- 作用：选区下拉前 +- 参数： + - {Array} [range]: 当前选区范围，只能为单个范围 + +------------ +### rangePullAfter +- 类型：Function +- 默认值：null +- 作用：选区下拉后 +- 参数： + - {Array} [range]: 下拉后的选区范围，只能为单个范围 + +------------ + +## 工作表 + +### sheetCreatekBefore +- 类型：Function +- 默认值：null +- 作用：创建sheet页前触发，sheet页新建也包含数据透视表新建 + +------------ +### sheetCreateAfter +- 类型：Function +- 默认值：null +- 作用：创建sheet页后触发，sheet页新建也包含数据透视表新建 +- 参数： + - {Object} [sheet]: 当前新创建的sheet页的配置 + +------------ +### sheetMoveBefore +- 类型：Function +- 默认值：null +- 作用：sheet移动前 +- 参数： + - {Number} [i]: 当前sheet页的index + - {Number} [order]: 当前sheet页order ------------ -### sheetClickBefore +### sheetMoveAfter - 类型：Function - 默认值：null -- 作用：点击sheet页前触发 +- 作用：sheet移动后 +- 参数： + - {Number} [i]: 当前sheet页的index + - {Number} [oldOrder]: 修改前当前sheet页order + - {Number} [newOrder]: 修改后当前sheet页order + +------------ +### sheetDeleteBefore +- 类型：Function +- 默认值：null +- 作用：sheet删除前 +- 参数： + - {Object} [sheet]: 要被删除sheet页的配置 + +------------ +### sheetDeleteAfter +- 类型：Function +- 默认值：null +- 作用：sheet删除后 +- 参数： + - {Object} [sheet]: 已被删除sheet页的配置 + +------------ +### sheetEditNameBefore +- 类型：Function +- 默认值：null +- 作用：sheet修改名称前 - 参数： - {Number} [i]: sheet页的index - - {Object} [sheet]: sheet页的配置 + - {String} [name]: 当前sheet页名称 ------------ -### sheetClicked +### sheetEditNameAfter - 类型：Function - 默认值：null -- 作用：点击sheet页后触发 +- 作用：sheet修改名称后 - 参数： - {Number} [i]: sheet页的index - - {Object} [sheet]: sheet页的配置 + - {String} [oldName]: 修改前当前sheet页名称 + - {String} [newName]: 修改后当前sheet页名称 ------------ -### workbookCreateBefore +### sheetEditColorBefore - 类型：Function - 默认值：null -- 作用：表格创建之前触发。旧的钩子函数叫做`beforeCreateDom` +- 作用：sheet修改颜色前 - 参数： - - {Object} [book]: 整个工作簿的配置（options） - + - {Number} [i]: sheet页的index + - {String} [color]: 当前sheet页颜色 + ------------ -### workbookCreated +### sheetEditColorAfter - 类型：Function - 默认值：null -- 作用：表格创建之后触发 +- 作用：sheet修改颜色后 +- 参数： + - {Number} [i]: sheet页的index + - {String} [oldColor]: 修改前当前sheet页颜色 + - {String} [newColor]: 修改后当前sheet页颜色 + +------------ + +## 工作簿 + +### workbookCreateBefore +- 类型：Function +- 默认值：null +- 作用：表格创建之前触发。旧的钩子函数叫做`beforeCreateDom` - 参数： - {Object} [book]: 整个工作簿的配置（options） ------------ -### workbookUpdated +### workbookCreateAfter - 类型：Function - 默认值：null - 作用：表格创建之后触发 - 参数： - {Object} [book]: 整个工作簿的配置（options） - + ------------ ### workbookDestroyBefore - 类型：Function @@ -513,7 +747,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - {Object} [book]: 整个工作簿的配置（options） ------------ -### workbookDestroyed +### workbookDestroyAfter - 类型：Function - 默认值：null - 作用：表格创建之后触发 @@ -524,14 +758,175 @@ Luckysheet开放了更细致的自定义配置选项，分别有 ### updated - 类型：Function - 默认值：null -- 作用：每次操作更新后执行的方法，即客户端每执行一次表格操作，Luckysheet将这次操作存到历史记录中后触发，撤销时因为也算一次操作，当然也会触发此钩子函数。 +- 作用：每次操作更新后执行的方法,在画布渲染之后执行，即客户端每执行一次表格操作，Luckysheet将这次操作存到历史记录中后触发，撤销重做时因为也算一次操作，当然也会触发此钩子函数。 - 参数： - {Object} [operate]: 本次操作的历史记录信息，根据不同的操作，会有不同的历史记录，参考源码 [历史记录](https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/controlHistory.js) ------------ -### fireMousedown +### resized - 类型：Function - 默认值：null -- 作用：单元格数据下钻自定义方法 +- 作用：resize执行之后 +- 参数： + - {Object} [size]: 整个工作簿区域的宽高 + +------------ + +## 图片 + +### imageInsertBefore +- 类型：Function +- 默认值：null +- 作用：图片插入之前 +- 参数： + - {Object} [url]: 图片地址 + +------------ +### imageInsertAfter +- 类型：Function +- 默认值：null +- 作用：图片插入之后 +- 参数： + - {Object} [item]]: 图片地址、宽高、位置等信息 + +------------ +### imageUpdateBefore +- 类型：Function +- 默认值：null +- 作用：图片修改之前，修改的内容包括宽高、位置、裁剪等操作 +- 参数： + - {Object} [item]]: 图片地址、宽高、位置等信息 + +------------ +### imageUpdateAfter +- 类型：Function +- 默认值：null +- 作用：图片修改之后，修改的内容包括宽高、位置、裁剪等操作 +- 参数： + - {Object} [oldItem]]: 修改前图片地址、宽高、位置等信息 + - {Object} [newItem]]: 修改后图片地址、宽高、位置等信息 + +------------ +### imageDeleteBefore +- 类型：Function +- 默认值：null +- 作用：图片删除之前 +- 参数： + - {Object} [item]]: 图片地址、宽高、位置等信息 + +------------ +### imageDeleteAfter +- 类型：Function +- 默认值：null +- 作用：图片删除之后 +- 参数： + - {Object} [item]]: 图片地址、宽高、位置等信息 + +------------ + +## 批注 + +### commentInsertBefore +- 类型：Function +- 默认值：null +- 作用：插入批注之前 +- 参数： + - {Object} [cell]: 要插入的批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}` + +------------ +### commentInsertAfter +- 类型：Function +- 默认值：null +- 作用：插入批注之后 +- 参数： + - {Object} [cell]: 被插入批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}`，包含批注信息 + +------------ +### commentDeleteBefore +- 类型：Function +- 默认值：null +- 作用：删除批注之前 +- 参数： + - {Object} [cell]: 要删除的批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}` +------------ +### commentDeleteAfter +- 类型：Function +- 默认值：null +- 作用：删除批注之后 +- 参数： + - {Object} [cell]: 被删除批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}` + +------------ +### commentUpdateBefore +- 类型：Function +- 默认值：null +- 作用：修改批注之前 +- 参数： + - {Object} [cell]: 批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}` + +------------ +### commentUpdateAfter +- 类型：Function +- 默认值：null +- 作用：修改批注之后 +- 参数： + - {Object} [oldCell]: 修改前批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}` + - {Object} [newCell]: 修改后批注所在的单元格信息，如：`{ r:0,c:2,v:{m:'233',v:'233'}}` + +------------ + +## 数据透视表 + +### pivotTableEditBefore +- 类型：Function +- 默认值：null +- 作用：修改数据透视表之前，操作如：拖动字段等 +- 参数： + - {Object} [sheet]: 数据透视表所在sheet页配置 + +------------ +### pivotTableEditAfter +- 类型：Function +- 默认值：null +- 作用：修改数据透视表之后，操作如：拖动字段等 +- 参数： + - {Object} [oldSheet]: 修改前数据透视表所在sheet页配置 + - {Object} [newSheet]: 修改后数据透视表所在sheet页配置 + +------------ + +## 冻结 + +### frozenCreateBefore +- 类型：Function +- 默认值：null +- 作用：设置冻结前 +- 参数： + - {Object} [frozen]: 冻结类型信息 + +------------ +### frozenCreateAfter +- 类型：Function +- 默认值：null +- 作用：设置冻结后 +- 参数： + - {Object} [frozen]: 冻结类型信息 + +------------ +### frozenCancelBefore +- 类型：Function +- 默认值：null +- 作用：取消冻结前 +- 参数： + - {Object} [frozen]: 冻结类型信息 + +------------ +### frozenCancelAfter +- 类型：Function +- 默认值：null +- 作用：取消冻结后 +- 参数： + - {Object} [frozen]: 冻结类型信息 + ------------ \ No newline at end of file diff --git a/src/controllers/handler.js b/src/controllers/handler.js index 0ff6f83..26bdda1 100644 --- a/src/controllers/handler.js +++ b/src/controllers/handler.js @@ -4396,18 +4396,7 @@ export default function luckysheetHandler() { clipboardData = e.originalEvent.clipboardData; } - //复制的是图片 - if(clipboardData.files.length == 1 && clipboardData.files[0].type.indexOf('image') > -1){ - let render = new FileReader(); - render.readAsDataURL(clipboardData.files[0]); - - render.onload = function(event){ - let src = event.target.result; - imageCtrl.inserImg(src); - } - - return; - } + let txtdata = clipboardData.getData("text/html"); @@ -4726,6 +4715,18 @@ export default function luckysheetHandler() { selection.pasteHandler(data, borderInfo); $("#luckysheet-copy-content").empty(); } + //复制的是图片 + else if(clipboardData.files.length == 1 && clipboardData.files[0].type.indexOf('image') > -1){ + let render = new FileReader(); + render.readAsDataURL(clipboardData.files[0]); + + render.onload = function(event){ + let src = event.target.result; + imageCtrl.inserImg(src); + } + + return; + } else { txtdata = clipboardData.getData("text/plain"); selection.pasteHandler(txtdata);