详解Vue如何实现颜色选择与调色板功能

<template>
  <div>
    <input type="color" v-model="color">
    <p>你选择的颜色是：{{ color }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: '#000000'
    }
  }
}
</script>

<template>
  <div>
    <sketch-picker v-model="color" />
    <p>你选择的颜色是：{{ color }}</p>
  </div>
</template>
<script>
import { SketchPicker } from 'vue-color';
export default {
  components: {
    SketchPicker
  },
  data() {
    return {
      color: {
        r: 0,
        g: 0,
        b: 0,
        a: 1
      }
    }
  }
}
</script>

<template>
  <div>
    <chrome-picker v-model="color" />
    <p>你选择的颜色是：{{ color }}</p>
  </div>
</template>
<script>
import { ChromePicker } from 'vue-color';
export default {
  components: {
    ChromePicker
  },
  data() {
    return {
      color: {
        r: 0,
        g: 0,
        b: 0,
        a: 1
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="color-picker">
      <div class="color-panel">
        <div class="color" v-for="color in colors" :style="{ background: color }" @click="selectColor(color)"></div>
      </div>
      <div class="color-selector" :style="{ left: selectorLeft, top: selectorTop }"></div>
    </div>
    <p>你选择的颜色是：{{ selectedColor }}</p>
  </div>
</template>
<style>
.color-picker {
  position: relative;
}
.color-panel {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}
.color {
  width: 20px;
  height: 20px;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
}
.color-selector {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--selected-color);
  cursor: crosshair;
}
</style>
<script>
export default {
  data() {
    return {
      colors: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#607d8b'],
      selectedColor: '',
      selectorLeft: 0,
      selectorTop: 0
    }
  },
  mounted() {
    this.selectedColor = getComputedStyle(document.documentElement).getPropertyValue('--selected-color');
  },
  methods: {
    selectColor(color) {
      this.selectedColor = color;
      document.documentElement.style.setProperty('--selected-color', color);
    },
    handleMouseMove(event) {
      const rect = event.target.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      this.selectorLeft = `${x}px`;
      this.selectorTop = `${y}px`;
    }
  }
}
</script>