vue-eyedrop-tool

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

npm install vue-eyedrop-tool

Example

Demo

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:

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:

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

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

Exposed props