vue实现指定颜色选择

2026-02-23 00:42:24VUE

Vue 实现指定颜色选择的方法

使用原生 HTML5 input color 元素

在 Vue 模板中直接使用 <input type="color"> 元素绑定 v-model：

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

<script>
export default {
  data() {
    return {
      selectedColor: '#ff0000' // 默认红色
    }
  }
}
</script>

集成第三方颜色选择器组件

安装 vue-color 库：

npm install vue-color

使用 Sketch 颜色选择器示例：

<template>
  <sketch-picker v-model="colors" @input="updateColors"/>
</template>

<script>
import { Sketch } from 'vue-color'
export default {
  components: {
    'sketch-picker': Sketch
  },
  data() {
    return {
      colors: { hex: '#333333' }
    }
  },
  methods: {
    updateColors(color) {
      console.log(color.hex)
    }
  }
}
</script>

自定义颜色选择器组件

创建具有预设颜色的自定义组件：

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

<script>
export default {
  props: {
    value: String,
    presetColors: {
      type: Array,
      default: () => ['#FF0000', '#00FF00', '#0000FF']
    }
  },
  methods: {
    selectColor(color) {
      this.$emit('input', color)
    }
  }
}
</script>

<style>
.color-picker div {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}
</style>

实现颜色选择器表单验证

添加颜色格式验证：

<template>
  <div>
    <input 
      type="text" 
      v-model="colorValue"
      @change="validateColor"
      placeholder="#RRGGBB"
    >
    <span v-if="error" class="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorValue: '',
      error: ''
    }
  },
  methods: {
    validateColor() {
      const hexRegex = /^#([0-9A-F]{3}){1,2}$/i
      if (!hexRegex.test(this.colorValue)) {
        this.error = '请输入有效的十六进制颜色值'
      } else {
        this.error = ''
      }
    }
  }
}
</script>

颜色选择器与 CSS 变量联动

将选择的颜色应用到 CSS 变量：

vue实现指定颜色选择

<template>
  <div>
    <input type="color" v-model="themeColor">
    <button @click="applyTheme">应用主题色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      themeColor: '#4CAF50'
    }
  },
  methods: {
    applyTheme() {
      document.documentElement.style.setProperty('--primary-color', this.themeColor)
    }
  }
}
</script>