A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's TwentyTwenty plugin.
$ npm install vue-twentytwenty --save
Or download the latest release using:
- https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.js
- https://unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css
vue-twentytwenty is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in a non-modular environment, TwentyTwenty will be registered as a global variable.
import TwentyTwenty from 'vue-twentytwenty';
export default {
// ...
components: {
TwentyTwenty
}
// ...
};It can then be used like so:
<TwentyTwenty
before="//placehold.it/600x200/E8117F/FFFFFF"
after="//placehold.it/600x200/CCCCCC/FFFFFF" />var Vue = require('vue')
var TwentyTwenty = require('vue-twentytwenty')
var YourComponent = Vue.extend({
// ...
components: {
'twentytwenty': TwentyTwenty
},
// ...
})