Vue Image Compare
Requirements
- Vue.js (^2.0.0)
Installation
npm i vue-image-compare --save
Usage
;; Vue; { return before: '/img/before.jpg' after: '/img/after.jpg' };
If you are not using using es6, instead of importing add
just before closing body tag.
Props
Name | Type | Description | Required | Default |
---|---|---|---|---|
before |
String |
Path to the image image before change | Yes | undefined |
after |
String |
Path to the image image after change | Yes | undefined |
full |
Boolean |
Determines if images are stretched to fill parent element. Can be used with help of CSS object-fit: cover to create full page image comparison |
No | false |
padding |
Object |
Set left and right "padding" in pixels, so handle can not reach edge of an image | No | { left: 0, right: 0 } |
hideAfter |
Boolean |
Hide image after and handle | No | false |
Slots
icon-left
- element to be placed on the left side of the handleicon-right
- element to be placed on the right side of the handle
Example: