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

fix(components): [image, image-viewer] Add crossorigin property (#15406)

Browse Source 
Co-authored-by: Xc <124118265@qq.com>
This commit is contained in:
Kasun Weligamage 2024-01-08 14:51:21 +05:30 committed by GitHub
parent 2664188c21
commit 4a3318f7b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,6 +69,7 @@ image/image-preview
| 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] | — |
| crossorigin | native attribute [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). | ^[enum]`'' \| 'anonymous' \| 'use-credentials'` | 'anonymous' | — |
| 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 |

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

@ -78,6 +78,13 @@ export const imageViewerProps = buildProps({
type: Number,
default: 7,
},
/**
* @description set HTML attribute: crossorigin.
*/
crossorigin: {
type: definePropType<'anonymous' | 'use-credentials' | ''>(String),
default: 'anonymous',
},
} as const)
export type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>

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

@ -55,6 +55,7 @@
:src="url"
:style="imgStyle"
:class="ns.e('img')"
:crossorigin="crossorigin"
@load="handleImgLoad"
@error="handleImgError"
@mousedown="handleMouseDown"
@ -126,6 +127,7 @@ const imgRefs = ref<HTMLImageElement[]>([])
const scopeEventListener = effectScope()
const loading = ref(true)
const crossorigin = ref<string>(props.crossorigin)
const activeIndex = ref(props.initialIndex)
const mode = shallowRef<ImageViewerMode>(modes.CONTAIN)
const transform = ref({

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

@ -103,6 +103,13 @@ export const imageProps = buildProps({
type: Number,
default: 7,
},
/**
* @description set HTML attribute: crossorigin.
*/
crossorigin: {
type: definePropType<'anonymous' | 'use-credentials' | ''>(String),
default: 'anonymous',
},
} as const)
export type ImageProps = ExtractPropTypes<typeof imageProps>

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

@ -11,6 +11,7 @@
:loading="loading"
:style="imageStyle"
:class="imageKls"
:crossorigin="crossorigin"
@click="clickHandler"
@load="handleLoad"
@error="handleError"
@ -84,6 +85,7 @@ const rawAttrs = useRawAttrs()
const attrs = useAttrs()
const imageSrc = ref<string | undefined>()
const crossorigin = ref<string>(props.crossorigin)
const hasLoadError = ref(false)
const isLoading = ref(true)
const showViewer = ref(false)