vue-image-compare

Vue Image Compare

Requirements

• Vue.js (^2.0.0)

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

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