ImagePreview
Install
Usage
Basic Usage
Set Start Position
Show Close Icon
After setting the closeable
attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the close-icon
attribute, and the icon location can be customized by using the close-icon-position
attribute
Close Event
Async Close
Component Call
API
Options
Attribute |
Description |
Type |
Default |
images |
Images URL list |
string[] |
[] |
startPosition |
Start position |
number | string |
0 |
showIndex |
Whether to show index |
boolean |
true |
showIndicators |
Whether to show indicators |
boolean |
false |
loop |
Whether to enable loop |
boolean |
true |
swipeDuration |
Animation duration (ms) |
number | string |
500 |
onClose |
Triggered when close |
Function |
- |
onChange v2.0.3 |
Triggered when current image change |
Function |
- |
onScale |
Triggered when current image scale |
Function |
- |
closeOnPopstate |
Whether to close when popstate |
boolean |
true |
asyncClose |
Whether to enable async close |
boolean |
false |
className |
Custom className |
any |
- |
maxZoom |
Max zoom |
number | string |
3 |
minZoom |
Min zoom |
number | string |
1/3 |
closeable v2.5.0 |
Whether to show close icon |
boolean |
false |
closeIcon v2.5.0 |
Close icon name |
string |
clear |
closeIconPosition v2.5.0 |
Close icon position,can be set to top-left bottom-left bottom-right |
string |
top-right |
teleport |
Return the mount node for ImagePreview |
string | Element |
- |
Props
Attribute |
Description |
Type |
Default |
images |
Images URL list |
string[] |
[] |
start-position |
Start position |
number | string |
0 |
swipe-duration |
Animation duration (ms) |
number | string |
500 |
show-index |
Whether to show index |
boolean |
true |
show-indicators |
Whether to show indicators |
boolean |
false |
loop |
Whether to enable loop |
boolean |
true |
async-close |
Whether to enable async close |
boolean |
false |
close-on-popstate |
Whether to close when popstate |
boolean |
true |
class-name |
Custom className |
any |
- |
max-zoom |
Max zoom |
number | string |
3 |
min-zoom |
Min zoom |
number | string |
1/3 |
closeable v2.5.0 |
Whether to show close icon |
boolean |
false |
close-icon v2.5.0 |
Close icon name |
string |
clear |
close-icon-position v2.5.0 |
Close icon position,can be set to top-left bottom-left bottom-right |
string |
top-right |
teleport |
Return the mount node for ImagePreview |
string | Element |
- |
Events
Event |
Description |
Parameters |
close |
Triggered when close |
{ index, url } |
closed v2.5.6 |
Triggered after closed |
- |
change |
Triggered when current image change |
index: index of current image |
scale v2.5.0 |
Triggered when current image scale |
{ index: index of current image, scale: scale of current image} |
swipeTo 2.9.0 |
Swipe to target index |
index: target index, options: Options |
Slots
Name |
Description |
index |
Custom index |
cover |
Custom content that covers the image preview |
onClose Parematers
Attribute |
Description |
Type |
url |
Url of current image |
number |
index |
Index of current image |
number |
onScale Parematers
Attribute |
Description |
Type |
index |
Index of current image |
number |
scale |
scale of current image |
number |