TwentyTwenty Image Comparison For Vue.js

Install & Download:

# Yarn
$ yarn add vue-twentytwenty
# NPM
$ npm install vue-twentytwenty --save

Description:

A vue.js image comparison library based on the jQuery TwentyTwenty plugin.

Usage:

Implement it in ES6.

import TwentyTwenty from 'vue-twentytwenty';
export default {
  // ...
  components: {
    TwentyTwenty
  }
  // ...
};

<TwentyTwenty
  before="before.jpg"
  after="after.jpg" />

Use it as UMD.

<div id="app">
  <TwentyTwenty
  before="before.jpg"
  after="after.jpg" />
</div>

new Vue({
  el: '#app'
})

Default props.

before: {
  type: String,
  required: true
},
beforeLabel: {
  type: String
},
after: {
  type: String,
  required: true
},
afterLabel: {
  type: String
},
offset: {
  type: [String, Number],
  default: 0.5,
  validator: (value) => {
    return (value > 0 && value <= 1)
  }
}