?
<template><div class="color"><button v-if="hasEyeDrop" @click="nativePick">點擊取色</button><input v-else type="color" @input="nativePick" v-model="selectedColor" /><p>所選顏色: {{ selectedColor }}</p><p>RGB顏色: {{ rgbColor }}</p></div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';const hasEyeDrop: boolean = 'EyeDropper' in window;
const selectedColor = ref<string>('#ffffff'); // 使用ref來創建響應式數據
let result: Record<string, any> = {}; // 用于存儲選擇的顏色信息const rgbColor = computed(() => {const hex = selectedColor.value.replace('#', '');const r = parseInt(hex.substring(0, 2), 16);const g = parseInt(hex.substring(2, 4), 16);const b = parseInt(hex.substring(4, 6), 16);return `rgb(${r}, ${g}, ${b})`;
});async function nativePick(e: Event): Promise<void> {const val = e ? (e.target as HTMLInputElement).value : null;if (val) {selectedColor.value = val; // 更新選中的顏色console.log('獲得顏色: ' + val);} else {const eyeDropper = new (window as any).EyeDropper(); // 初始化一個EyeDropper對象console.log('按Esc可退出');try {const colorResult = await eyeDropper.open(); // 開始拾取顏色selectedColor.value = colorResult.sRGBHex; // 更新選中的顏色result = colorResult; // 存儲顏色信息console.log('獲得顏色: ' + colorResult.sRGBHex);// 使用result變量console.log(result);} catch (e) {console.log('用戶取消了取色');}}
}
</script><!-- // import { ref } from 'vue';
// const hasEyeDrop: boolean = 'EyeDropper' in window;
// const selectedColor = ref<string>('#ffffff'); // 使用ref來創建響應式數據
// let result: Record<string, any> = {}; // 用于存儲選擇的顏色信息// async function nativePick(e: Event): Promise<void> {
// const val = e ? (e.target as HTMLInputElement).value : null;
// if (val) {
// selectedColor.value = val; // 更新選中的顏色
// console.log('獲得顏色: ' + val);
// } else {
// const eyeDropper = new (window as any).EyeDropper(); // 初始化一個EyeDropper對象
// console.log('按Esc可退出');
// try {
// const colorResult = await eyeDropper.open(); // 開始拾取顏色
// selectedColor.value = colorResult.sRGBHex; // 更新選中的顏色
// result = colorResult; // 存儲顏色信息
// console.log('獲得顏色: ' + colorResult.sRGBHex);// // 使用result變量
// console.log(result);
// } catch (e) {
// console.log('用戶取消了取色');
// }
// }
// }
<style>
.color {width: 100%;height: 100%;background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style> -->
效果圖
?
？)
