vue-compare-two-images-component

Vue two images compare component

Hello. This is simple component for VueJS can help you check diffrence between two images using slider. On this page you will get to know how install and use features this component.

DEMO & EXAMPLES

Repository on Github

License: MIT

Changelog

1.0.5 - Fixed animate arrows

Features

• Simple for using
• Responsive (expandes from the container width, set container's height using image properly aspect ratio)
• Flexible tuning
• Mobile frendly

Install

Install npm package

$ npm install --save vue-compare-two-images-component

Register component globally

import CompareTwoImages from 'vue-compare-two-images-component';
 
// Register component as CompareTwoImages after
 
Vue.use(CompareTwoImages);

or import into your component directly.

import CompareTwoImages from 'vue-compare-two-images-component';
 
// Import CompareTwoImages component
 
export default {
    name: "YourComponentName",
    components: {
        CompareTwoImages: CompareTwoImages
        // Register imported component as CompareTwoImages
    }
}

After that use compare-two-images tag into template.

<template>
    <compare-two-images
        :leftImage="path/to/left.png"
        :rightImage="path/to/right.png">
    </compare-two-images>
</template>

Props

PROPERTY NAME	TYPE	DEFAULT VALUE	DESCRIPTION
leftImage	String	null	Left image's url. This property is required
labelsEnable	Boolean	true	Enabling text labels for images in container
rightImage	String	null	Right image's url. This property is required
leftLabel	String	"Left image"	Left image's text label
rightLabel	String	"Right image"	Right image's text label
leftImageOpacity	Number	1	Left image's opacity (from 1 to 0)
labelsPosition	String	"top"	Text labels position in container ("top" or "bottom" values only)
labelsBackgroundColor	String	"rgba(37, 34, 29, 0.58)"	A text label's background color (hex/rgba/rgb/none format no matter. Just use CSS correct color format)
labelsTextColor	String	"rgb(253, 253, 253)"	A text color in label (hex/rgba/rgb/none format no matter. Just use CSS correct color format)
labelsFontSize	String	"inherit"	Change a text font size in label (e.g. "16px", "1em", "1rem")
labelsUppercase	Boolean	false	Setup a text decoration style in label
labelsPaddings	String	"15px"	Text labels's paddings (any CSS correct string value e.g. "10px 10px 10px 10px" or "1em 1.2em")
dividerPosition	Number	50	Initial divider horizontal position (in persents)
dividerWidth	String	"2px"	Vertical divider's line width (any CSS correct string width value e.g. "0.25em", "4px")
dividerWidthOnHover	String	"20px"	Divider's width on mouse hover (any CSS correct string width value e.g. "2rem", "40px")
dividerColor	String	"rgb(253, 253, 253)"	Divider's color (any CSS correct color format)
showAnimateArrows	Boolean	true	Visibility animated arrows near divider
arrowsWidth	String	"20px"	Size of animated arrows (any CSS correct string width value e.g. "2rem", "40px")
arrowsColor	String	"rgb(253, 253, 253)"	Animated arrows color (any CSS correct string color value - rgb/rgba/hex)
adaptiveHeight	Boolean	true	Enable adaptive container's height

For additional information see documentation