Browse Source

docs: 补充文档

master
cdswyda 4 years ago
parent
commit
0eb38b98b4
  1. 102
      docs/zh/guide/config.md

102
docs/zh/guide/config.md

@ -78,6 +78,8 @@ Luckysheet开放了更细致的自定义配置选项,分别有
- 是否限制工作表名长度 [limitSheetNameLength](#limitSheetNameLength) - 是否限制工作表名长度 [limitSheetNameLength](#limitSheetNameLength)
- 默认允许工作表名的最大长度 [defaultSheetNameMaxLength](#defaultSheetNameMaxLength) - 默认允许工作表名的最大长度 [defaultSheetNameMaxLength](#defaultSheetNameMaxLength)
- 分页器 [pager](#pager) - 分页器 [pager](#pager)
- 自定义图片上传 [uploadImage](#uploadImage)
- 自定义图片地址处理 [imageUrlHandle](#imageUrlHandle)
### container ### container
- 类型:String - 类型:String
@ -714,6 +716,79 @@ Luckysheet开放了更细致的自定义配置选项,分别有
} }
``` ```
### uploadImage
用于自定义图片的上传,默认情况下,插入的图片是以base64的形式放入sheet数据中,如果需要单独上传图片,仅在sheet中引用图片地址可使用此配置。
- 类型: `function (file) => Promise(imgUrl)`,接受file对象,返回Promise,值为上传完成的图片url
- 默认值: `undefined`
:::deatil 查看示例配置
```js
{
uploadImage: function (file) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192.168.210.159/miniuiServer/imageUploader.php');
// 额外的请求头
var headers = {};
if (headers) {
Object.keys(headers).forEach(function (k) {
xhr.setRequestHeader(k, headers[k]);
});
}
var data = new FormData();
// 要上传的图片文件
data.append('file', file, file.name || '');
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
var url = res.downloadUrl;
if (url) {
resolve(url); // 给上传的后的地址
} else {
reject('image upload error');
}
} else {
reject('image upload error');
}
}
};
});
}
}
```
:::
### imageUrlHandle
图片上传的路径处理函数,和 [uploadImage](#uploadImage) 相关,一般只有使用自定义图片上传才需要此配置。
- 类型: `function (string) => string`,接受原始路径,返回新路径
- 默认值: `undefined`
- 作用,处理图片显示时的路径。
如上传返回地址为接口地址,如: `rest/attach/[fileguid]`, 则需要处理为 `http://localhost:8080/xxx/rest/attach/[fileguid]` 才能显示,但将前面域名信息写入数据,后续使用可能会有问题,因此可使用此方法处理路径,全路径仅在展示使用,数据内仅存储 `rest/attach/[fileguid]`
```js
{
// 处理上传图片的地址
imageUrlHandle: function (url) {
// 已经是 // http data 开头则不处理
if (/^(?:\/\/|(?:http|https|data):)/i.test(url)) {
return url;
}
return location.origin + url;
}
}
```
------------ ------------
## 钩子函数 ## 钩子函数
@ -1461,6 +1536,33 @@ Luckysheet开放了更细致的自定义配置选项,分别有
- 作用:工作表从活动状态转为非活动状态后 - 作用:工作表从活动状态转为非活动状态后
- 参数: - 参数:
- {Number} [i]: sheet页的`index` - {Number} [i]: sheet页的`index`
### imageDeleteBefore
- 类型:Function
- 默认值:null
- 作用:图片删除前触发
- 参数:
- {Object} [imageItem]: 要删除的图片配置对象
### imageDeleteAfter
- 类型:Function
- 默认值:null
- 作用:图片删除后触发,如果自定义了图片上传,可在此处发请求删除图片
- 参数:
- {Object} [imageItem]: 删除的图片配置对象
```js
{
hook: {
imageDeleteAfter: function (imageItem) {
var src = imgItem.src;
$.post('/rest/file/deletebyurl', {downloadUrl: src});
}
}
}
```
------------ ------------

Loading…
Cancel
Save