打造前沿颜色选择器，开启视觉设计新时代

2023-11-15 15:44:56

引言
在前端开发中，经常需要处理颜色的选择。颜色选择器是前端开发者必备的工具，它可以帮助开发者轻松地选择和修改网页元素的颜色。本文将介绍如何快速实现一个颜色选择器组件，帮助您轻松地完成网页色彩的设计。

实现步骤

1. HTML 结构

首先，我们需要创建一个 HTML 结构来容纳颜色选择器。

<div class="color-picker">
  <input type="text" class="color-input">
  <div class="color-preview"></div>
  <div class="color-palette"></div>
</div>

在这个 HTML 结构中，我们定义了一个包含颜色选择器的 div 容器。其中，color-input 是一个文本输入框，用于输入颜色值。color-preview 是一个预览区，用于显示当前选择的颜色。color-palette 是一个颜色调色板，用于选择颜色。

2. CSS 样式

接下来，我们需要添加 CSS 样式来美化颜色选择器。

.color-picker {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
}

.color-input {
  width: 100%;
  height: 20px;
  padding: 5px;
  border: 1px solid #ccc;
}

.color-preview {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.color-palette {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}

.color-palette div {
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid #ccc;
}

.color-palette div:hover {
  border: 1px solid #000;
}

3. JavaScript 脚本

最后，我们需要编写 JavaScript 脚本来实现颜色选择器的功能。

// 获取元素
const colorInput = document.querySelector('.color-input');
const colorPreview = document.querySelector('.color-preview');
const colorPalette = document.querySelector('.color-palette');

// 创建颜色选择器
const colorPicker = new Picker({
  parent: colorPalette,
  popup: false,
  color: '#ffffff',
  onChange: (color) => {
    colorInput.value = color.hex;
    colorPreview.style.backgroundColor = color.hex;
  },
});

// 监听文本框输入事件
colorInput.addEventListener('input', (e) => {
  const color = e.target.value;
  colorPicker.setColor(color);
});

// 监听颜色调色板点击事件
colorPalette.addEventListener('click', (e) => {
  const color = e.target.style.backgroundColor;
  colorPicker.setColor(color);
});