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

news2025/10/31 20:10:10

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 = false
    defaultValue = newValue
    Value.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>