mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
docs(components): [image] update class by computed and new docs (#13024)
* docs(components): [image and image viewer] use new display tag * refactor(components): [image | image-viewer] set class by computed * docs(components): [image] update head of image viewer exposes
This commit is contained in:
wzc520pyfm
GitHub
parent
e25caadcef
commit
abd6faecc3
@ -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` |
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
@ -377,7 +375,9 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
/** @description manually switch image */
|
||||
/**
|
||||
* @description manually switch image
|
||||
*/
|
||||
setActiveItem,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -8,53 +8,83 @@ import {
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
|
||||
export const imageProps = buildProps({
|
||||
hideOnClickModal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.
|
||||
*/
|
||||
hideOnClickModal: Boolean,
|
||||
/**
|
||||
* @description image source, same as native.
|
||||
*/
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description 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).
|
||||
*/
|
||||
fit: {
|
||||
type: String,
|
||||
values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
|
||||
*/
|
||||
loading: {
|
||||
type: String,
|
||||
values: ['eager', 'lazy'],
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description whether to use lazy load.
|
||||
*/
|
||||
lazy: Boolean,
|
||||
/**
|
||||
* @description the container to add scroll listener when using lazy load.
|
||||
*/
|
||||
scrollContainer: {
|
||||
type: definePropType<string | HTMLElement | undefined>([String, Object]),
|
||||
},
|
||||
/**
|
||||
* @description allow big image preview.
|
||||
*/
|
||||
previewSrcList: {
|
||||
type: definePropType<string[]>(Array),
|
||||
default: () => mutable([] as const),
|
||||
},
|
||||
previewTeleported: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.
|
||||
*/
|
||||
previewTeleported: Boolean,
|
||||
/**
|
||||
* @description set image preview z-index.
|
||||
*/
|
||||
zIndex: {
|
||||
type: Number,
|
||||
},
|
||||
/**
|
||||
* @description initial preview image index, less than the length of `url-list`.
|
||||
*/
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/**
|
||||
* @description whether the viewer preview is infinite.
|
||||
*/
|
||||
infinite: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @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,
|
||||
|
||||
@ -10,11 +10,7 @@
|
||||
:src="imageSrc"
|
||||
:loading="loading"
|
||||
:style="imageStyle"
|
||||
:class="[
|
||||
ns.e('inner'),
|
||||
preview && ns.e('preview'),
|
||||
isLoading && ns.is('loading'),
|
||||
]"
|
||||
:class="imageKls"
|
||||
@click="clickHandler"
|
||||
@load="handleLoad"
|
||||
@error="handleError"
|
||||
@ -96,6 +92,12 @@ const supportLoading = isClient && 'loading' in HTMLImageElement.prototype
|
||||
let stopScrollListener: (() => void) | undefined
|
||||
let stopWheelListener: (() => void) | undefined
|
||||
|
||||
const imageKls = computed(() => [
|
||||
ns.e('inner'),
|
||||
preview.value && ns.e('preview'),
|
||||
isLoading.value && ns.is('loading'),
|
||||
])
|
||||
|
||||
const containerStyle = computed(() => rawAttrs.style as StyleValue)
|
||||
|
||||
const imageStyle = computed<CSSProperties>(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user