vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge pull request #3913 from buraksaglam089/issue-3864 

imagePreview slot added
pull/3919/head^2
Tuğçe Küçükoğlu 2023-05-03 17:47:01 +03:00 committed by GitHub
parent 7ebaeb3947 fc6230c29a
commit db82eb8987
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/components/image.js
View File

@ -52,6 +52,10 @@ const ImageSlots = [
{ {
name: 'close', name: 'close',
description: 'Custom content for the component close.' description: 'Custom content for the component close.'
},
{
name: 'imagePreview',
description: 'Custom content for the component preview.'
} }
]; ];

4
components/lib/image/Image.d.ts vendored
View File

@ -62,6 +62,10 @@ export interface ImageSlots {
* Custom close template. * Custom close template.
*/ */
close(): VNode[]; close(): VNode[];
/**
* Custom preview template.
*/
imagePreview(): VNode[];
} }
export interface ImageEmits {} export interface ImageEmits {}

4
components/lib/image/Image.vue
View File

@ -41,7 +41,9 @@
</div> </div>
<transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave"> <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
<div v-if="previewVisible"> <div v-if="previewVisible">
<img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" /> <slot name="imagePreview" :previewImageClick="onPreviewImageClick" :imagePreviewStyle="imagePreviewStyle">
<img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
</slot>
</div> </div>
</transition> </transition>
</div> </div>

7
doc/image/PreviewDoc.vue
View File

@ -3,8 +3,13 @@
<p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p> <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview /> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview>
<template #imagePreview="slotProps">
<img src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" :style="slotProps.imagePreviewStyle" @click="slotProps.previewImageClick" />
</template>
</Image>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>