search

marcincichocki / vue-image-compare

Compare 2 images using slider with vue.js
https://marcincichocki.github.io/vue-image-compare/
MIT License
33 stars 20 forks source link
vue

readme

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="https://github.com/marcincichocki/vue-image-compare/raw/master/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

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