系列之颜色选择器（一）：内部事件

前端

2023-11-09 10:08:13

前言

最近接到一个任务，通过第三方库的形式写一个颜色选择器并引入wangEditor，以此优化wangEditor当前字体颜色和背景颜色功能。为了方便理解，我定义了一些名词：

颜色选择器：一个允许用户选择颜色的用户界面控件。
内部事件：颜色选择器组件内部触发的事件，如点击、改变等。
外部事件：颜色选择器组件外部触发的事件，如鼠标移入、移出等。

准备工作

我这里是用的Typ, 一个基于 JavaScript 的库，用于创建自定义的颜色选择器。它提供了丰富的功能，包括：

预定义的颜色调色板
能够创建自定义的颜色
支持不同的颜色格式，如十六进制、RGB 和 HSL
可自定义的颜色选择器外观

内部事件

Typ 提供了多种内部事件，可以用来监听颜色选择器组件的状态变化。这些事件包括：

change：当用户选择了一个颜色时触发。
input：当用户在颜色选择器中移动时触发。
mousedown：当用户在颜色选择器中按下鼠标时触发。
mouseup：当用户在颜色选择器中松开鼠标时触发。
mousemove：当用户在颜色选择器中移动鼠标时触发。

这些事件可以用来实现各种功能，如：

当用户选择了一个颜色时，更新文本框中的颜色值。
当用户在颜色选择器中移动时，显示颜色的预览。
当用户在颜色选择器中按下鼠标时，开始拖动颜色滑块。
当用户在颜色选择器中松开鼠标时，停止拖动颜色滑块。
当用户在颜色选择器中移动鼠标时，更新颜色的预览。

代码示例

const colorPicker = new Typ('#color-picker');

colorPicker.on('change', function(color) {
  console.log('Color changed to: ', color);
});

colorPicker.on('input', function(color) {
  console.log('Color input: ', color);
});

colorPicker.on('mousedown', function(color) {
  console.log('Color mousedown: ', color);
});

colorPicker.on('mouseup', function(color) {
  console.log('Color mouseup: ', color);
});

colorPicker.on('mousemove', function(color) {
  console.log('Color mousemove: ', color);
});

这段代码创建一个颜色选择器实例，并监听其内部事件。当用户选择了一个颜色时，控制台会输出"Color changed to: "，后跟所选颜色的值。当用户在颜色选择器中移动时，控制台会输出"Color input: "，后跟颜色的值。当用户在颜色选择器中按下鼠标时，控制台会输出"Color mousedown: "，后跟颜色的值。当用户在颜色选择器中松开鼠标时，控制台会输出"Color mouseup: "，后跟颜色的值。当用户在颜色选择器中移动鼠标时，控制台会输出"Color mousemove: "，后跟颜色的值。