# vue-eyedrop-tool

> Eyedrop tool for vue

Latest version **1.0.10** (published 2019-08-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-eyedrop-tool
pnpm add vue-eyedrop-tool
yarn add vue-eyedrop-tool
bun add vue-eyedrop-tool
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2019-08-11 |
| First published | 2019-08-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 254.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Mathias Monstrey |
| Maintainers | mmathias |
| Keywords | vue, eyedrop |

## Links

- npm: https://www.npmjs.com/package/vue-eyedrop-tool
- Repository: https://github.com/MathiasMonstrey/vue-eyedrop-tool
- Homepage: https://github.com/MathiasMonstrey/vue-eyedrop-tool#readme
- Issues: https://github.com/MathiasMonstrey/vue-eyedrop-tool/issues
- npm.io page: https://npm.io/package/vue-eyedrop-tool

## Dependencies (1)

- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.2.1

## Recent versions

- 1.0.10 (latest) — 2019-08-11
- 1.0.9 — 2019-08-11
- 1.0.8 — 2019-08-11
- 1.0.7 — 2019-08-11
- 1.0.6 — 2019-08-11
- 1.0.5 — 2019-08-09
- 1.0.4 — 2019-08-09
- 1.0.3 — 2019-08-09
- 1.0.2 — 2019-08-09
- 1.0.1 — 2019-08-09
- 1.0.0 — 2019-08-09

## README

# Vue Eyedrop Tool

Component that allows the user to have a magnifying glass when hovering an image that shows the current color in rgb and hex.

## Installation

```bash
npm install vue-eyedrop-tool
```

## Example

[Demo](https://vue-eyedrop-tool.netlify.com/)

## Usage

Performance wise it's best to only import components when you need them, and you probably don't need this component on every page, so there is no need to load it of you don't need it.

Import the vue-eyedrop-component inside the component you need:
```javascript
import EyedropTool from 'vue-eyedrop-tool';

...

export default {
    components: {
        EyedropTool
    },
    data() {
        return {
            imgSrc1: require('./assets/image1.jpg'),
            imgSrc2: require('./assets/image2.jpg'),
        }
    }
}

```

Inside your template:

```html
<div>
    <eyedrop-tool :src="imgSrc1" :width="559" :height="744" alt="City" @color-update="updateColor" color-label
        style="display: inline-block" />
    <eyedrop-tool :zoom="10" :magnifier-glass-width="200" :magnifier-glass-height="200" :src="imgSrc2" :width="640" :height="360"
        alt="Rick and morty" @color-update="updateColor" color-label style="display: inline-block" />
</div>
```

## CSS

The component comes with css, to make use of it, add the following code to your main.js file:

```javascript
import 'vue-eyedrop-tool/dist/eyedrop.css';
```

## Exposed props
|Name|Type|Default|required|
|-|-|-|-|
|alt|string||yes|
|height|number||yes|
|src|string||yes|
|width|number||yes|
|colorLabel|boolean|false|
|magnifierGlassheight|number|100|
|magnifierGlassWidth|number|100|
|zoom|number|4|

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