mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components)[image] imageviewer add close-on-press-escape(#7154) (#7182)

Browse Source 
* feat: imageviewer add close-on-press-escape(#7154)

Co-authored-by: xiaochenchen <xiaochen.chen@igg.com>
This commit is contained in:
Xc 2022-04-25 13:34:40 +08:00 committed by GitHub
parent 71d61bad5b
commit 335569e8a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/en-US/component/image.md
View File

@ -51,19 +51,20 @@ image/image-preview
### Image Attributes
| Name | Description | Type | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------- |
| `src` | image source, same as native. | `string` | — |
| `fit` | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale'-down'` | — |
| `hide-on-click-modal` | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | `boolean` | `false` |
| `lazy` | whether to use lazy load. | `boolean` | `false` |
| `scroll-container` | the container to add scroll listener when using lazy load. | `string \| HTMLElement` | the nearest parent container whose overflow property is auto or scroll. |
| `alt` | native attribute `alt`. | `string` | — |
| `referrer-policy` | native attribute `referrerPolicy`. | `string` | — |
| `preview-src-list` | allow big image preview. | `string[]` | — |
| `z-index` | set image preview z-index. | `number` | — |
| `initial-index` | initial preview image index, less than the length of `url-list`. | `number` | `0` |
| `preview-teleported` | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | `boolean` | `false` |
| Name | Description | Type | Default |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------- |
| `src` | image source, same as native. | `string` | — |
| `fit` | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale'-down'` | — |
| `hide-on-click-modal` | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | `boolean` | `false` |
| `lazy` | whether to use lazy load. | `boolean` | `false` |
| `scroll-container` | the container to add scroll listener when using lazy load. | `string \| HTMLElement` | the nearest parent container whose overflow property is auto or scroll. |
| `alt` | native attribute `alt`. | `string` | — |
| `referrer-policy` | native attribute `referrerPolicy`. | `string` | — |
| `preview-src-list` | allow big image preview. | `string[]` | — |
| `z-index` | set image preview z-index. | `number` | — |
| `initial-index` | initial preview image index, less than the length of `url-list`. | `number` | `0` |
| `close-on-press-escape` | whether the image-viewer can be closed by pressing ESC | `boolean` | `true` |
| `preview-teleported` | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | `boolean` | `false` |
### Image Events

4
packages/components/image-viewer/src/image-viewer.ts
View File

@ -31,6 +31,10 @@ export const imageViewerProps = buildProps({
type: Boolean,
default: false,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
} as const)
export type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>

2
packages/components/image-viewer/src/image-viewer.vue
View File

@ -212,7 +212,7 @@ function registerEventListener() {
switch (e.code) {
// ESC
case EVENT_CODE.esc:
hide()
props.closeOnPressEscape && hide()
break
// SPACE
case EVENT_CODE.space:

4
packages/components/image/src/image.ts
View File

@ -51,6 +51,10 @@ export const imageProps = buildProps({
type: Boolean,
default: true,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
} as const)
export type ImageProps = ExtractPropTypes<typeof imageProps>

1
packages/components/image/src/image.vue
View File

@ -23,6 +23,7 @@
:url-list="previewSrcList"
:hide-on-click-modal="hideOnClickModal"
:teleported="teleported"
:close-on-press-escape="closeOnPressEscape"
@close="closeViewer"
@switch="switchViewer"
>