# vue-twentytwenty-one

> [![npm](https://img.shields.io/npm/v/vue-twentytwenty-one.svg) ![npm](https://img.shields.io/npm/dm/vue-twentytwenty-one.svg)](https://www.npmjs.com/package/vue-twentytwenty-one) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuej

Latest version **1.0.6** (published 2020-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-twentytwenty-one
pnpm add vue-twentytwenty-one
yarn add vue-twentytwenty-one
bun add vue-twentytwenty-one
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-08-20 |
| First published | 2020-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 605.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Markus Madeja |
| Maintainers | kauto |

## Links

- npm: https://www.npmjs.com/package/vue-twentytwenty-one
- Repository: https://github.com/kauto/vue-twentytwenty-one
- Homepage: https://github.com/kauto/vue-twentytwenty-one#readme
- Issues: https://github.com/kauto/vue-twentytwenty-one/issues
- npm.io page: https://npm.io/package/vue-twentytwenty-one

## Recent versions

- 1.0.6 (latest) — 2020-08-20
- 1.0.5 — 2020-08-20
- 1.0.4 — 2020-08-19
- 1.0.3 — 2020-08-19
- 1.0.2 — 2020-08-19
- 1.0.1 — 2020-08-19
- 1.0.0 — 2020-08-19

## README

# Vue-TwentyTwenty-One

[![npm](https://img.shields.io/npm/v/vue-twentytwenty-one.svg)
![npm](https://img.shields.io/npm/dm/vue-twentytwenty-one.svg)](https://www.npmjs.com/package/vue-twentytwenty-one)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

A small component to quickly let users see the differences between 2 images. This is a fork of [vue-twentytwenty](https://www.npmjs.com/package/vue-twentytwenty).

## Installation

```
$ npm install vue-twentytwenty-one
```

##git  Usage

```js
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:

```html
<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|

---
_Source: https://npm.io/package/vue-twentytwenty-one · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._