网站建站过程分析,做网站指导,花生棒做网站,国外精彩网站1.使用vueuse中的useEyeDropper来实现滴管的功能和使用input中的typecolor属性来实现颜色盘 效果#xff1a; 图标触发吸管 input触发颜色盘
组件代码部分 #xff1a;dropper ---- vueuse使用
templatediv classsRGBHexWrap fbc…1.使用vueuse中的useEyeDropper来实现滴管的功能和使用input中的typecolor属性来实现颜色盘 效果 图标触发吸管 input触发颜色盘
组件代码部分 dropper ---- vueuse使用
templatediv classsRGBHexWrap fbcspan classiconStyle fec clickhandleOpenel-icon :size20EditPen //el-icon/spanspan classcolorSpaninput typecolor :valuedefaultValue inputupdateColor classcolor v-ifshowInput //span/div
/templatescript setupimport { 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);}
};/scriptstyle langscss 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
dropper v-modelVRColor/dropper
