Vue-TwentyTwenty-One

A small component to quickly let users see the differences between 2 images. This is a fork of vue-twentytwenty.

Installation

$ npm install vue-twentytwenty-one

##git Usage

import 'vue-twentytwenty-one/dist/vue-twentytwenty-one.css';
import TwentyTwenty from 'vue-twentytwenty-one';

export default {
  // ...
  components: {
    TwentyTwenty
  },
  data() {
    return {
      offset: 0.5
    }
  }
  // ...
};

It can then be used like so:

<TwentyTwenty
  v-model="offset"
  before="//placehold.it/600x200/E8117F/FFFFFF"
  after="//placehold.it/600x200/CCCCCC/FFFFFF" />

Props

Props	Description	Required	Type	Default
before	URL of before image	true	String	-
beforeLabel	When hovering over image what label should show up over before image	false	String	-
after	URL of after image	true	String	-
afterLabel	When hovering over image what label should show up over after image	false	String	-
value	How far from the left the slider should be on load (between 0 and 1)	false	Number	0.5
keyboardStep	How far the slider should be moved on arrow key press (between 0 and 1)	false	Number	0.2
lock	Locks the 20-20, so the offset can't be changed	false	Boolean	false

Events

Event	Description
input	Triggered when the offset changes
click	Triggered if the Twentytwenty is clicked without moving the slider