Vue Image Compare
This plugin was forked from https://www.npmjs.com/package/vue-image-compare
Requirements
- Vue.js (^2.0.0)
Installation
npm i vue-image-compare-plus --saveUsage
import Vue from 'vue';
import VueImageCompare from 'vue-image-compare-plus';
Vue.use(VueImageCompare);
new Vue({
data() {
return {
before: '/img/before.jpg',
after: '/img/after.jpg'
}
}
}).$mount('#app');<div id="app">
<image-compare :before="before" :after="after"/>
</div>If you are not using using es6, instead of importing add
<script src="/path/to/vue-image-compare.js"></script>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 |
handleStartPosition |
String |
Determine handle start position | No | center |
Slots
-
icon-left- element to be placed on the left side of the handle -
icon-right- element to be placed on the right side of the handle
Example:
<image-compare before="/img/before.jpg" after="/img/after.jpg" :padding="{ left: 50, right: 50 }">
<i class="fa fa-angle-left" aria-hidden="true" slot="icon-left"></i>
<i class="fa fa-angle-right" aria-hidden="true" slot="icon-right"></i>
</image-compare>