vue实现调色板

Vue 实现调色板的方法

使用原生 HTML5 input color

Vue 可以结合 HTML5 的 input[type="color"] 元素快速实现基础调色板功能：

<template>
  <input type="color" v-model="selectedColor" @input="onColorChange">
</template>

<script>
export default {
  data() {
    return {
      selectedColor: '#ff0000'
    }
  },
  methods: {
    onColorChange(e) {
      console.log('Selected color:', e.target.value)
    }
  }
}
</script>

使用第三方组件库

推荐使用专门的颜色选择器组件：

1. Vue Color（基于 Sketch 的调色板）：

   npm install vue-color

   
   <template>
   <chrome-picker v-model="colors" @input="updateColor"/>
   </template>

import { Chrome } from 'vue-color' export default { components: { 'chrome-picker': Chrome }, data() { return { colors: { hex: '#194d33' } } }, methods: { updateColor(color) { this.colors = color } } } ```

1. Element UI 颜色选择器（适合使用 Element 的项目）：

   <el-color-picker v-model="color"></el-color-picker>

自定义调色板组件

创建可交互的色板矩阵：

<template>
  <div class="color-palette">
    <div 
      v-for="color in palette" 
      :key="color" 
      :style="{ backgroundColor: color }"
      @click="selectColor(color)"
      class="color-swatch"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      palette: [
        '#FF0000', '#00FF00', '#0000FF',
        '#FFFF00', '#FF00FF', '#00FFFF',
        '#FFFFFF', '#000000', '#C0C0C0'
      ],
      selectedColor: ''
    }
  },
  methods: {
    selectColor(color) {
      this.selectedColor = color
      this.$emit('color-selected', color)
    }
  }
}
</script>

<style>
.color-palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 150px;
}
.color-swatch {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1px solid #ddd;
}
</style>

HSV 颜色空间实现

创建更专业的颜色选择器需要处理 HSV 颜色模型：

// 辅助函数：HSV 转 RGB
function hsvToRgb(h, s, v) {
  let r, g, b
  const i = Math.floor(h * 6)
  const f = h * 6 - i
  const p = v * (1 - s)
  const q = v * (1 - f * s)
  const t = v * (1 - (1 - f) * s)

  switch (i % 6) {
    case 0: r = v; g = t; b = p; break
    case 1: r = q; g = v; b = p; break
    case 2: r = p; g = v; b = t; break
    case 3: r = p; g = q; b = v; break
    case 4: r = t; g = p; b = v; break
    case 5: r = v; g = p; b = q; break
  }

  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  }
}

实现建议

1. 简单需求使用原生 input[type="color"] 或 UI 库组件
2. 专业级需求考虑集成 vue-color 等成熟解决方案
3. 自定义实现时注意颜色空间转换和可访问性
4. 移动端需增加触摸事件支持

扩展功能

• 添加颜色历史记录功能
• 实现 HEX/RGB/HSL 格式切换
• 集成到表单验证系统
• 添加预设主题色板