Skip to content

marcincichocki/vue-image-compare

Repository files navigation

Vue Image Compare

Requirements

Installation

npm i vue-image-compare --save

Usage

import Vue from 'vue';
import VueImageCompare from 'vue-image-compare';

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

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>

License

MIT