vue-eye-dropper
vue-eye-dropper
Vue wrapper for EyeDropper instance
Install
npm i vue-eye-dropper
Import and register component
Global
import { createApp } from 'vue'
import App from './App.vue'
import { EyeDropper } from 'vue-eye-dropper'
const app = createApp(App)
app.component('EyeDropper', EyeDropper)
Local
<script setup lang="ts">
import { EyeDropper } from 'vue-eye-dropper'
const handleColorPicked = (color: string) => {
console.log('Color picked:', color)
}
</script>
<template>
<EyeDropper default-color="#fff" :height="25" :width="25" @colorPicked="handleColorPicked" />
</template>
Browser Support
| Browser | Version |
|---|---|
| Chrome | 95-125 |
| Edge | 121 |
| Opera | 81-106 |
Props
| Name | Value | Default |
|---|---|---|
| defaultColor | srgbHex String | #fff |
| width | number | 25 |
| height | number | 25 |
Events
| Name | Value |
|---|---|
| colorPicked | srgbHex String |
Related Packages
@orshot/colorshot
Color and gradient picker for React and Vue. Solid, linear, radial and conic gra...
4,934
15
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.0.12 | ^3.4.15 | ||
| 0.0.11 | ^3.4.15 | ||
| 0.0.10 | ^3.4.15 | ||
| 0.0.9 | ^3.4.15 | ||
| 0.0.8 | ^3.4.15 | ||
| 0.0.7 | ^3.4.15 | ||
| 0.0.6 | ^3.4.15 | ||
| 0.0.5 | ^3.4.15 | ||
| 0.0.4 | ^3.4.15 | ||
| 0.0.3 | ^3.4.15 | ||
| 0.0.2 | ^3.4.15 | ||
| 0.0.1 | ^3.4.15 | ||
| 0.0.0 | ^3.4.15 |