当前位置：首页 > VUE

vue实现rgb调色

2026-01-08 04:17:14VUE

Vue实现RGB调色功能

实现思路 通过Vue的数据绑定和事件处理，动态调整RGB三个通道的值，实时更新显示颜色。

vue实现rgb调色

核心代码示例

vue实现rgb调色

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

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

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

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

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

<script>
export default {
  data() {
    return {
      r: 128,
      g: 128,
      b: 128
    }
  }
}
</script>

<style>
.color-picker {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}

.color-display {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}

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

input[type="range"] {
  width: 100%;
}

.rgb-value {
  margin-top: 20px;
  text-align: center;
  font-family: monospace;
}
</style>

功能扩展建议

添加十六进制显示 在组件中添加计算属性来转换RGB为十六进制格式：

computed: {
  hexColor() {
    const toHex = (val) => {
      const hex = val.toString(16)
      return hex.length === 1 ? '0' + hex : hex
    }
    return `#${toHex(this.r)}${toHex(this.g)}${toHex(this.b)}`
  }
}

添加颜色预设 提供常用颜色的快捷选择：

<div class="color-presets">
  <button 
    v-for="color in presetColors" 
    :key="color"
    @click="setColor(color)"
    :style="{ backgroundColor: color }"
  ></button>
</div>

data() {
  return {
    presetColors: [
      'rgb(255, 0, 0)',
      'rgb(0, 255, 0)',
      'rgb(0, 0, 255)',
      'rgb(255, 255, 0)',
      'rgb(255, 0, 255)',
      'rgb(0, 255, 255)'
    ]
  }
},
methods: {
  setColor(color) {
    const [r, g, b] = color.match(/\d+/g)
    this.r = parseInt(r)
    this.g = parseInt(g)
    this.b = parseInt(b)
  }
}