当前位置：首页 > news >正文

使用VUE3实现简单颜色盘，吸管组件，useEyeDropper和＜input type=“color“ /＞的使用

news 2025/9/13 5:23:04

1.使用vueuse中的useEyeDropper来实现滴管的功能和使用input中的type="color"属性来实现颜色盘

效果：

图标触发吸管

input触发颜色盘

组件代码部分：<dropper> ---- vueuse使用

<template><div class="sRGBHexWrap fbc"><span class="iconStyle fec" @click="handleOpen"><el-icon :size="20"><EditPen /></el-icon></span><span class="colorSpan"><input type="color" :value="defaultValue" @input="updateColor" class="color" v-if="showInput" /></span></div>
</template><script setup>import { useEyeDropper } from '@vueuse/core'
const { open, sRGBHex } = useEyeDropper()
// 引入 Vue 相关的 API
import { ref, watch, onMounted } from "vue";// 定义组件的 props 和 emits
const props = defineProps(['modelValue'])
const emit = defineEmits(["update:modelValue"]);
//默认颜色显示
let defaultValue = '#4EAF31' //默认展示的颜色，使用ref无法触发初始化显示
let showInput = ref(true)   //因为defaultValue不是ref所以需要手动刷新dom
let Value = ref(null) //派发的颜色//获取颜色盘的颜色
const getColor = (newValue) => {showInput.value = falsedefaultValue = newValueValue.value = newValue;showInput.value = true
};//监听接受的值然后进行复制
watch(() => props.modelValue, async (newValue) => {if (newValue) {getColor(newValue)}
}, { immediate: true })//监听滴管颜色
watch(sRGBHex, async (newmodelValue) => {if (newmodelValue) {getColor(newmodelValue)}
})//监听值的变化
watch(Value, async (newValue) => {if (newValue) {emit("update:modelValue", newValue);}
})//获取颜色盘的颜色
const updateColor = (event) => {Value.value = event.target.value;
};//处理打开滴管时候按Esc按钮报错
const handleOpen = () => {try {open();} catch (error) {console.error('Error while opening EyeDropper:', error);}
};</script><style lang="scss" scoped>
.color {background: var(--background-color2);outline: none;box-shadow: none;border: none;
}.sRGBHexWrap {width: 100%;height: 100%;/* background-color: aliceblue; */}.iconStyle {width: 100%;height: 100%;padding: 0px 10px;cursor: pointer;
}.colorSpan {cursor: pointer;width: 50%;height: 50%;border-radius: 5px;
}input {padding: 0px;margin: 0px;
}
</style>

使用组件<dropper>