Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(components): [image] update class by computed and new docs #13024

Merged
merged 3 commits into from
Jun 3, 2023
Merged

refactor(components): [image] update class by computed and new docs #13024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3753bf
docs(components): [image and image viewer] use new display tag
wzc520pyfm May 31, 2023
8571812
refactor(components): [image | image-viewer] set class by computed
wzc520pyfm May 31, 2023
101518a
docs(components): [image] update head of image viewer exposes
wzc520pyfm May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 47 additions & 43 deletions docs/en-US/component/image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,62 +59,66 @@ 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` |
| `loading` ^(2.2.3) | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) | `'eager' \| 'lazy'` | — |
| `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` | — |
| `referrerpolicy` | native attribute [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/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` |
| 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). | ^[enum]`'' \| '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 |
| loading ^(2.2.3) | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading). | ^[enum]`'eager' \| 'lazy'` | — |
| lazy | whether to use lazy load. | ^[boolean] | false |
| scroll-container | the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load. | ^[string] / ^[object]`HTMLElement` | — |
| alt | native attribute `alt`. | ^[string] | — |
| referrerpolicy | native attribute [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy). | ^[string] | — |
| preview-src-list | allow big image preview. | ^[object]`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 |
| infinite | whether the viewer preview is infinite. | ^[boolean] | true |
| zoom-rate | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 |

### Image Events

| Name | Description | Type |
| -------- | ------------------------------------------------------------------------------------------------- | ------------------------- |
| `load` | same as native load. | `(e: Event) => void` |
| `error` | same as native error. | `(e: Error) => void` |
| `switch` | trigger when switching images. | `(index: number) => void` |
| `close` | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | `() => void` |
| Name | Description | Type |
| ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------ |
| load | same as native load. | ^[Function]`(e: Event) => void` |
| error | same as native error. | ^[Function]`(e: Error) => void` |
| switch | trigger when switching images. | ^[Function]`(index: number) => void` |
| close | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | ^[Function]`() => void` |
| show | trigger when the viewer displays | ^[Function]`() => void` |

### Image Slots

| Name | Description |
| ------------- | -------------------------------------------------------- |
| `placeholder` | custom placeholder content when image hasn't loaded yet. |
| `error` | custom image load failed content. |
| `viewer` | description of the image. |
| Name | Description |
| ----------- | -------------------------------------------------------- |
| placeholder | custom placeholder content when image hasn't loaded yet. |
| error | custom image load failed content. |
| viewer | description of the image. |

## Image Viewer API

### Image Viewer Attributes

| Name | Description | Type | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `url-list` | preview link list. | `string[]` | `[]` |
| `z-index` | preview backdrop z-index. | `number \| string` | — |
| `initial-index` | the initial preview image index, less than or equal to the length of `url-list`. | `number` | `0` |
| `infinite` | whether preview is infinite. | `boolean` | `true` |
| `hide-on-click-modal` | whether user can emit close event when clicking backdrop. | `boolean` | `false` |
| `teleported` | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`. | `boolean` | `false` |
| `zoom-rate` | the zoom rate of the image viewer zoom event | `number` | `1.2` |
| Name | Description | Type | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
| url-list | preview link list. | ^[object]`string[]` | [] |
| z-index | preview backdrop z-index. | ^[number] / ^[string] | — |
| initial-index | the initial preview image index, less than or equal to the length of `url-list`. | ^[number] | 0 |
| infinite | whether preview is infinite. | ^[boolean] | true |
| hide-on-click-modal | whether user can emit close event when clicking backdrop. | ^[boolean] | false |
| teleported | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false |
| zoom-rate | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 |
| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | ^[boolean] | true |

### Image Viewer Events

| Name | Description | Type |
| -------- | ------------------------------------------------------------------------------------------------- | ------------------------- |
| `close` | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | `() => void` |
| `switch` | trigger when switching images. | `(index: number) => void` |
| Name | Description | Type |
| ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------ |
| close | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | ^[Function]`() => void` |
| switch | trigger when switching images. | ^[Function]`(index: number) => void` |

## Image Viewer Methods
### Image Viewer Exposes

| Method | Description | Parameters |
| ------------- | --------------------- | ----------------------------------------------------- |
| setActiveItem | manually switch image | index of the image to be switched to, starting from 0 |
| Name | Description | Type |
| ------------- | --------------------- | ------------------------------------ |
| setActiveItem | manually switch image | ^[Function]`(index: number) => void` |
34 changes: 26 additions & 8 deletions packages/components/image-viewer/src/image-viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,51 @@ export type ImageViewerAction =
| 'anticlockwise'

export const imageViewerProps = buildProps({
/**
* @description preview link list.
*/
urlList: {
type: definePropType<string[]>(Array),
default: () => mutable([] as const),
},
/**
* @description preview backdrop z-index.
*/
zIndex: {
type: Number,
},
/**
* @description the initial preview image index, less than or equal to the length of `url-list`.
*/
initialIndex: {
type: Number,
default: 0,
},
/**
* @description whether preview is infinite.
*/
infinite: {
type: Boolean,
default: true,
},
hideOnClickModal: {
type: Boolean,
default: false,
},
teleported: {
type: Boolean,
default: false,
},
/**
* @description whether user can emit close event when clicking backdrop.
*/
hideOnClickModal: Boolean,
/**
* @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.
*/
teleported: Boolean,
/**
* @description whether the image-viewer can be closed by pressing ESC.
*/
closeOnPressEscape: {
type: Boolean,
default: true,
},
/**
* @description the zoom rate of the image viewer zoom event.
*/
zoomRate: {
type: Number,
default: 1.2,
Expand Down
34 changes: 17 additions & 17 deletions packages/components/image-viewer/src/image-viewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,10 @@

<!-- ARROW -->
<template v-if="!isSingle">
<span
:class="[
ns.e('btn'),
ns.e('prev'),
ns.is('disabled', !infinite && isFirst),
]"
@click="prev"
>
<span :class="arrowPrevKls" @click="prev">
<el-icon><ArrowLeft /></el-icon>
</span>
<span
:class="[
ns.e('btn'),
ns.e('next'),
ns.is('disabled', !infinite && isLast),
]"
@click="next"
>
<span :class="arrowNextKls" @click="next">
<el-icon><ArrowRight /></el-icon>
</span>
</template>
Expand Down Expand Up @@ -167,6 +153,18 @@ const currentImg = computed(() => {
return props.urlList[activeIndex.value]
})

const arrowPrevKls = computed(() => [
ns.e('btn'),
ns.e('prev'),
ns.is('disabled', !props.infinite && isFirst.value),
])

const arrowNextKls = computed(() => [
ns.e('btn'),
ns.e('next'),
ns.is('disabled', !props.infinite && isLast.value),
])

const imgStyle = computed(() => {
const { scale, deg, offsetX, offsetY, enableTransition } = transform.value
let translateX = offsetX / scale
Expand Down Expand Up @@ -377,7 +375,9 @@ onMounted(() => {
})

defineExpose({
/** @description manually switch image */
/**
* @description manually switch image
*/
setActiveItem,
})
</script>
Loading
Loading