vue实现rgb调色

Vue实现RGB调色功能

以下是一个基于Vue 3的RGB调色器实现方案，包含颜色选择、实时预览和代码示例：

组件模板部分

<template>
  <div class="color-picker">
    <div class="color-display" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }"></div>

    <div class="slider-group">
      <label>R: {{ r }}</label>
      <input type="range" min="0" max="255" v-model.number="r">
    </div>

    <div class="slider-group">
      <label>G: {{ g }}</label>
      <input type="range" min="0" max="255" v-model.number="g">
    </div>

    <div class="slider-group">
      <label>B: {{ b }}</label>
      <input type="range" min="0" max="255" v-model.number="b">
    </div>

    <div class="output">RGB值: rgb({{ r }}, {{ g }}, {{ b }})</div>
  </div>
</template>

组件脚本部分

<script>
import { ref } from 'vue'

export default {
  setup() {
    const r = ref(128)
    const g = ref(128)
    const b = ref(128)

    return { r, g, b }
  }
}
</script>

样式部分

<style scoped>
.color-picker {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.color-display {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.slider-group {
  margin-bottom: 15px;
}

.slider-group label {
  display: block;
  margin-bottom: 5px;
}

.slider-group input {
  width: 100%;
}

.output {
  margin-top: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
}
</style>

功能扩展建议

十六进制转换 添加计算属性将RGB转换为十六进制：

const hex = computed(() => {
  return `#${[r.value, g.value, b.value]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('')}`
})

颜色输入增强 添加文本输入框与滑块同步：

<input type="number" min="0" max="255" v-model.number="r">

颜色历史记录 使用数组存储选择的颜色：

const colorHistory = ref([])

function saveColor() {
  colorHistory.value.push(`rgb(${r.value}, ${g.value}, ${b.value})`)
}

响应式设计优化 添加媒体查询适应移动设备：

@media (max-width: 600px) {
  .color-picker {
    padding: 10px;
  }
}

实现要点

1. 使用v-model.number修饰符确保滑块值作为数字类型绑定
2. 通过计算属性实时计算衍生颜色值
3. 内联样式绑定实现颜色预览
4. 添加过渡效果提升用户体验
5. 响应式设计确保多设备兼容性

这个实现方案提供了基础的RGB调色功能，可以根据需要进一步扩展颜色选择器功能，如添加HSV模式、预设颜色板或颜色对比度检查等功能。