vue实现取色器

2026-02-17 02:59:29VUE

实现取色器的基本思路

使用Vue实现取色器可以通过结合HTML5的<input type="color">元素或第三方库来完成。以下是两种常见的实现方式。

使用原生HTML5颜色选择器

HTML5提供了原生颜色选择器，通过<input type="color">可以直接调用浏览器默认的颜色选择器。

<template>
  <div>
    <input type="color" v-model="selectedColor" @input="updateColor" />
    <p>Selected Color: {{ selectedColor }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedColor: '#000000'
    }
  },
  methods: {
    updateColor() {
      console.log('Color updated:', this.selectedColor);
    }
  }
}
</script>

使用第三方库实现更丰富的取色器

如果需要更丰富的功能（如调色板、透明度控制等），可以使用第三方库如vue-color或@ckpack/vue-color。

安装vue-color

npm install vue-color

示例代码

<template>
  <div>
    <chrome-picker v-model="colors" @input="updateColor"></chrome-picker>
    <p>Selected Color: {{ colors.hex }}</p>
  </div>
</template>

<script>
import { Chrome } from 'vue-color';

export default {
  components: {
    'chrome-picker': Chrome
  },
  data() {
    return {
      colors: {
        hex: '#000000',
        rgba: { r: 0, g: 0, b: 0, a: 1 }
      }
    }
  },
  methods: {
    updateColor() {
      console.log('Color updated:', this.colors.hex);
    }
  }
}
</script>

自定义取色器组件

如果需要完全自定义取色器，可以通过Canvas实现颜色选择区域，并结合滑块控制色相、饱和度和亮度。

vue实现取色器

示例代码

<template>
  <div>
    <div class="color-picker">
      <canvas ref="canvas" @click="pickColor"></canvas>
      <input type="range" v-model="hue" min="0" max="360" @input="updateCanvas" />
    </div>
    <p>Selected Color: {{ selectedColor }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hue: 0,
      selectedColor: '#000000'
    }
  },
  mounted() {
    this.updateCanvas();
  },
  methods: {
    updateCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      canvas.width = 200;
      canvas.height = 200;

      for (let x = 0; x < canvas.width; x++) {
        for (let y = 0; y < canvas.height; y++) {
          const saturation = x / canvas.width * 100;
          const lightness = 100 - y / canvas.height * 100;
          const color = `hsl(${this.hue}, ${saturation}%, ${lightness}%)`;
          ctx.fillStyle = color;
          ctx.fillRect(x, y, 1, 1);
        }
      }
    },
    pickColor(event) {
      const canvas = this.$refs.canvas;
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const ctx = canvas.getContext('2d');
      const pixel = ctx.getImageData(x, y, 1, 1).data;
      this.selectedColor = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
    }
  }
}
</script>

<style>
.color-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
canvas {
  border: 1px solid #ccc;
}
</style>