Press UI

# ImagePreview

Image zoom preview supports two ways of function calling and component calling.

# Code Demo

# Basic Usage

First embed the component in the page, and then call showImagePreview functionally.

<Image Preview
   :id="FUNCTIONAL_ID_MAP.IMAGE_PREVIEW"
   mode="functional"
/>

import ImagePreview from 'press-ui/press-image-preview/press-image-preview.vue';
import { showImagePreview } from 'press-ui/press-image-preview/index';


export default {
   components: {
     ImagePreview,
   },
   methods: {
     show() {
       showImagePreview({
         selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
         images: this. images,
       }).then(() => {
       });
     }
   }
}

# Specify the initial position

Support passing in configuration objects, and specify the initial position (index value) of the image through the startPosition option.

showImagePreview({
   selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
   images: this. images,
   startPosition: 1,
})

# Show close button

After setting the closeable attribute, a close icon will be displayed in the upper right corner of the popup layer, and the icon can be customized through the close-icon attribute, and the icon position can be customized by using the close-icon-position attribute.

showImagePreview({
   selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
   images: this. images,
   closeable: true,
})

# Listen to close event

The showImagePreview method returns a promise, and when it is closed, the state will become resolved, which can be monitored in the then method.

showImagePreview({
   selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
   images: this. images,
   closeable: true,
}).then(() => {
   this.onGTip(this.t('closeTip'));
})

# Asynchronous shutdown

The asynchronous close can be enabled through the asyncClose attribute. After the asynchronous close is enabled, click the picture, mask layer, close button, etc., and the promise state will be set to rejected, and the instance object parameter will be passed in. The user can call context The .closeDialog method closes.

showImagePreview({
   selector: `#${FUNCTIONAL_ID_MAP.IMAGE_PREVIEW}`,
   images: this. images,
   asyncClose: true,
}).catch(({ context }) => {
   context. closeDialog();
})

# Component call

Support component calls, the parent component needs to set show to false when close.

<Image Preview
   :show="show"
   closeable
   :start-position="1"
   :images="images"
   :custom-style="customStyle"
   @close="show = false"
/>

# API

# Props

Parameter Description Type Default
show Whether to display, it is fixed to true when the function is called boolean false
images list of images Array<string> -
startPosition initial position number 0
showIndex whether to show index boolean false
asyncClose Whether to close asynchronously boolean false
closeable Whether to show the close icon boolean false
closeIcon close icon name string clear
closeIconPosition close icon position string top-right
custom-style custom style string -
custom-class custom class name string -

# Events

Event Name Description Parameters
close fires when close -
change Triggered when switching images active(current index)
横屏

← Link →