1.0.5 • Published 3 years ago
vue-header-compare v1.0.5
Vue Image Compare
Requirements
- Vue.js (^2.0.0)
Installation
npm i vue-image-compare --saveUsage
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 handleicon-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>