Color Picker

Компонент Color Picker в библиотеке Element Plus предназначен для выбора цвета пользователем через визуальный интерфейс. Он предоставляет гибкие возможности работы с цветами в формате HEX, RGB и HSL, поддерживает палитры, прозрачность и настраиваемые стили.

Импорт и регистрация компонента

Для использования Color Picker необходимо импортировать его в проект Vue 3:

import { ElColorPicker } from 'element-plus';
import 'element-plus/dist/index.css';

export default {
  components: {
    ElColorPicker
  }
}

Компонент можно использовать как стандартный тег в шаблоне:

Здесь v-model связывает выбранный цвет с реактивной переменной color.

Основные пропсы

  • model-value (String) — задает текущий выбранный цвет. Можно использовать форматы #RRGGBB, rgba() или hsl().
  • size (String) — определяет размер кнопки выбора цвета. Допустимые значения: medium, small, mini.
  • disabled (Boolean) — блокирует компонент.
  • show-alpha (Boolean) — включает возможность выбора прозрачности цвета.
  • predefine (Array) — массив предопределенных цветов, отображаемых в палитре.

Пример с предопределенной палитрой и прозрачностью:



data() {
  return {
    color: '#ff4500'
  }
}

Методы и события

Color Picker поддерживает несколько ключевых событий:

  • change — вызывается при изменении цвета.
  • active-change — вызывается при движении ползунка или выборе цвета, до окончательного подтверждения.
  • clear — вызывается при очистке значения цвета.

Пример использования событий:



methods: {
  handleChange(newColor) {
    console.log('Цвет выбран:', newColor);
  },
  handleActiveChange(tempColor) {
    console.log('Промежуточный цвет:', tempColor);
  }
}

Настройка формата цвета

Компонент позволяет управлять форматом отображаемого цвета:

  • format (String) — определяет формат цвета. Допустимые значения: 'hex', 'rgb', 'hsl'.
  • inline (Boolean) — если true, палитра отображается всегда, без всплывающего окна.

Использование с динамическими стилями

Выбранный цвет удобно использовать для динамических стилей компонентов. Например, изменение фона блока:

Советы по интеграции в формы

Color Picker легко интегрируется с формами el-form:


  
    
  

data() {
  return {
    form: {
      color: '#409EFF'
    }
  }
}

Полезные трюки

  1. Палитра для брендов — передача массива цветов через predefine позволяет создать готовую палитру компании.
  2. Стилизация кнопки — можно изменить размер и форму с помощью пропа size и CSS-классов.
  3. Прямое редактирование — включение show-alpha и установка format="rgba" позволяет пользователю вводить цвета вручную с прозрачностью.

Ограничения и рекомендации

  • Компонент оптимизирован для современных браузеров и Vue 3. Vue 2 поддерживается через совместимую версию.
  • Для мобильных устройств рекомендуется использовать inline-палитру, чтобы избежать проблем с всплывающими окнами.
  • При использовании в динамических темах важно следить за реактивностью переменной v-model, чтобы изменения цвета сразу отражались в интерфейсе.
Оглавление