From 1ab45306b7e2a92b7deb23820233729e23452d1d Mon Sep 17 00:00:00 2001 From: kev1nzh Date: Fri, 17 Sep 2021 15:51:06 +0800 Subject: [PATCH] docs(upload): add `abstract` props docs and CHANGELOG (#1102) --- CHANGELOG.en-US.md | 4 ++ CHANGELOG.zh-CN.md | 4 ++ src/upload/demos/enUS/abstract.demo.md | 45 +++++++++++++++++++++++ src/upload/demos/enUS/index.demo-entry.md | 14 +++++++ src/upload/demos/zhCN/abstract.demo.md | 45 +++++++++++++++++++++++ src/upload/demos/zhCN/index.demo-entry.md | 14 +++++++ 6 files changed, 126 insertions(+) create mode 100644 src/upload/demos/enUS/abstract.demo.md create mode 100644 src/upload/demos/zhCN/abstract.demo.md diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 83855ca600d..643e3fdc63a 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,9 @@ # CHANGELOG +### Feats + +- `n-upload` add `abstract` prop, add `n-upload-trigger` 和 `n-upload-file-list` component, closes [#1102](https://github.com/TuSimple/naive-ui/issues/1102). + ### Fixes - Fix `n-select` focus input when closing tag with `filterable` , closes [#1170](https://github.com/TuSimple/naive-ui/issues/1170). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 61bde385b3c..c4ab6dfe008 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,9 @@ # CHANGELOG +### Feats + +- `n-upload` 新增 `abstract` 属性，新增 `n-upload-trigger` 和 `n-upload-file-list` 组件，关闭 [#1102](https://github.com/TuSimple/naive-ui/issues/1102) + ### Fixes - 修复 `n-select` `filterable` 下关闭标签 input 光标聚焦问题，关闭 [#1170](https://github.com/TuSimple/naive-ui/issues/1170) diff --git a/src/upload/demos/enUS/abstract.demo.md b/src/upload/demos/enUS/abstract.demo.md new file mode 100644 index 00000000000..a19ae4fc3bd --- /dev/null +++ b/src/upload/demos/enUS/abstract.demo.md @@ -0,0 +1,45 @@ +# No Wrapper DOM + +`n-upload` and `n-upload-trigger` set `abstract`. + +`n-upload-trigger` and `n-upload-file-list` need to be called from within `n-upload`. + +```html +
+ + + Eat + Sleep + + Upload + + + + + + + +
+``` + +```js +import { defineComponent, ref } from 'vue' +export default defineComponent({ + setup () { + const fileListRef = ref([ + { + id: 'b', + name: 'file.doc', + status: 'finished', + type: 'text/plain' + } + ]) + + return { fileList: fileListRef } + } +}) +``` diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md index 95f8833432f..75d4ddc2347 100644 --- a/src/upload/demos/enUS/index.demo-entry.md +++ b/src/upload/demos/enUS/index.demo-entry.md @@ -14,6 +14,7 @@ default-files before-upload image-style image-card-style +abstract ``` ## API @@ -22,6 +23,7 @@ image-card-style | Name | Type | Default | Description | | --- | --- | --- | --- | +| abstract | `boolean` | `false` | Whether or not DOM wrapping does not exist. | | accept | `string` | `undefined` | The accept type of upload. See accept. | | action | `string` | `undefined` | The URL to submit data to. | | create-thumbnail-url | `(file: File) => Promise` | `undefined` | Customize file thumbnails. | @@ -49,6 +51,12 @@ image-card-style | on-before-upload | `(options: { file: UploadFileInfo, fileList: Array }) => (Promise \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload. | | on-preview | `(file: FileInfo) => void` | `undefined` | Callback functions for clicking on file links or preview buttons. | +### UploadTrigger Props + +| 名称 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| abstract | `boolean` | `false` | Whether there is no DOM wrapper, to be used together with the parent component `Upload.abstract`. | + #### UploadFileInfo Type | Property | Type | Description | @@ -80,3 +88,9 @@ image-card-style | Name | Parameters | Description | | --- | --- | --- | | default | `()` | The content of the upload dragger, use can refer to [Drag to Upload](#drag). | + +### UploadTrigger Slots + +| 名称 | 参数 | 说明 | +| --- | --- | --- | +| default | `(options: { handleTriggerClick: () => void, handleTriggerDragOver: (e: DragEvent) => void, handleTriggerDragEnter: (e: DragEvent) => void, handleTriggerDragLeave: (e: DragEvent) => void, handleTriggerDrop: (e: DragEvent) => void})` | `handleTriggerClick` is the click upload function, `handleTriggerDrop` is the drag and drop upload function, `handleTriggerDragEnter`, `handleTriggerDragOver` and `handleTriggerDragLeave` are the drag and drop event functions. | diff --git a/src/upload/demos/zhCN/abstract.demo.md b/src/upload/demos/zhCN/abstract.demo.md new file mode 100644 index 00000000000..1c9315c090d --- /dev/null +++ b/src/upload/demos/zhCN/abstract.demo.md @@ -0,0 +1,45 @@ +# 不需要包裹 DOM + +`n-upload` 和 `n-upload-trigger` 设置 `abstract`。 + +`n-upload-trigger`和 `n-upload-file-list` 需在 `n-upload` 内调用。 + +```html +
+ + + Eat + Sleep + + Upload + + + + + + + +
+``` + +```js +import { defineComponent, ref } from 'vue' +export default defineComponent({ + setup () { + const fileListRef = ref([ + { + id: 'b', + name: 'file.doc', + status: 'finished', + type: 'text/plain' + } + ]) + + return { fileList: fileListRef } + } +}) +``` diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md index b1ae3a58c3e..722d102a566 100644 --- a/src/upload/demos/zhCN/index.demo-entry.md +++ b/src/upload/demos/zhCN/index.demo-entry.md @@ -14,6 +14,7 @@ default-files before-upload image-style image-card-style +abstract ``` ## API @@ -22,6 +23,7 @@ image-card-style | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | +| abstract | `boolean` | `false` | 是否不存在 DOM 包裹 | | accept | `string` | `undefined` | 接受的文件类型，参考 accept | | action | `string` | `undefined` | 请求提交的地址 | | create-thumbnail-url | `(file: File) => Promise` | `undefined` | 自定义文件缩略图 | @@ -48,6 +50,12 @@ image-card-style | on-before-upload | `(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 | | on-preview | `(file: FileInfo) => void` | `undefined` | 点击文件链接或预览按钮的回调函数 | +### UploadTrigger Props + +| 名称 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| abstract | `boolean` | `false` | 是否不存在 DOM 包裹，需与父级 `Upload.abstract` 同时使用 | + #### UploadFileInfo Type | 属性 | 类型 | 说明 | @@ -79,3 +87,9 @@ image-card-style | 名称 | 参数 | 说明 | | ------- | ---- | --------------------------------------------- | | default | `()` | 上传拖动器的内容，使用可参考[拖拽上传](#drag) | + +### UploadTrigger Slots + +| 名称 | 参数 | 说明 | +| --- | --- | --- | +| default | `(options: { handleTriggerClick: () => void, handleTriggerDragOver: (e: DragEvent) => void, handleTriggerDragEnter: (e: DragEvent) => void, handleTriggerDragLeave: (e: DragEvent) => void, handleTriggerDrop: (e: DragEvent) => void})` | `handleTriggerClick` 为点击上传函数，`handleTriggerDrop` 为拖拽上传函数，`handleTriggerDragEnter`、`handleTriggerDragOver` 和 `handleTriggerDragLeave` 为拖拽事件函数 |