Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tam315/vue-compare-image

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/tam315/vue-compare-image
Owner: tam315
Archived: true
Created: 2018-09-26T05:24:20.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2022-12-10T17:44:01.000Z (about 2 years ago)
Last Synced: 2024-12-06T09:58:48.851Z (about 1 month ago)
Language: JavaScript
Size: 2.89 MB
Stars: 60
Watchers: 1
Forks: 15
Open Issues: 29
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        # Vue Compare Image

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)

Simple Vue.js component to compare two images using slider.

![img](https://user-images.githubusercontent.com/10986861/67158760-0f02a480-f377-11e9-9b83-75bc8005693a.gif)

NOTE: [React Version](https://github.com/junkboy0315/react-compare-image) is also available!

## Demo

[DEMO](https://vue-compare-image.yuuniworks.com/)

## Features

- Simple

- Responsive (fit to the parent width)

- Size difference between two images handled correctly. Element size determined by following two factors:

  - width of the parent

  - right image's aspect ratio

## How to use

In the shell:

```bash

yarn add vue-compare-image

// or

npm install --save vue-compare-image

```

In your component file:

```js

import VueCompareImage from 'vue-compare-image';

export default {

  name: 'app',

  components: { VueCompareImage },

};

```

```xml

  ;

```

## Props

| Prop (\* required)       | type           | default | description                          |

| ------------------------ | -------------- | :-----: | ------------------------------------ |

| handleSize               | number (px)    |   40    | diameter of slider handle (by pixel) |

| hover                    | boolean        |  false  | Whether to slide at hover            |

| leftImage \*             | string         |  null   | left image's url                     |

| leftImageAlt             | string         |  null   | left image's alt                     |

| leftLabel                | string         |  null   | Left image text label                |

| rightImage \*            | string         |  null   | right image's url                    |

| rightImageAlt            | string         |  null   | right image's alt                    |

| rightLabel               | string         |  null   | Right image text label               |

| sliderLineWidth          | number (px)    |    2    | line width of slider (by pixel)      |

| sliderPositionPercentage | number (float) |   0.5   | Starting line position (from 0 to 1) |

## Dependencies

- [css-element-queries](https://github.com/marcj/css-element-queries) to detect element resize event.

## Contributors

  

    
_{Shota Tamura}
💻

    
_{Lukáš Irsák}
💻

    
_{Ricardo Morin}
💻