Vue3实现一个拾色器功能

javascript 复制代码
​
<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> -->

效果图

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js