Color Picker

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

import { NColorPicker } from 'naive-ui'

Базовое использование:

<n-color-picker v-model:value="color" />

Здесь color — реактивная переменная, которая хранит выбранное значение цвета.

Свойства и их настройка

  • value — текущий цвет. Может быть строкой в формате HEX (#ff0000) или RGB (rgb(255, 0, 0)), а также объектом HSL.
  • show-alpha — boolean, определяет, будет ли доступна настройка прозрачности.
  • format — строка, задающая формат цвета: "hex", "rgb", "hsl". Позволяет ограничить выбор только одним форматом.
  • preset-colors — массив заранее определённых цветов, которые отображаются под панелью выбора.
  • disabled — отключает компонент, делая его неинтерактивным.

Пример использования с предустановленными цветами и поддержкой прозрачности:

<n-color-picker
  v-model:value="color"
  :show-alpha="true"
  format="rgb"
  :preset-colors="['#ff0000', '#00ff00', '#0000ff']"
/>

Работа с событиями

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

  • on-update:value — вызывается при изменении цвета.
  • on-change — срабатывает после завершения выбора, полезно для отправки данных на сервер.
  • on-clear — если включена возможность очистки, событие срабатывает при сбросе значения.

Пример:

<n-color-picker
  v-model:value="color"
  @update:value="handleUpdate"
  @change="handleChange"
/>

<script setup>
import { ref } from 'vue'

const color = ref('#00ff00')

function handleUpdate(newColor) {
  console.log('Цвет обновлен:', newColor)
}

function handleChange(newColor) {
  console.log('Цвет окончательно выбран:', newColor)
}
</script>

Настройка интерфейса и стиля

Color Picker в Naive UI поддерживает несколько визуальных режимов:

  • inline — отображение панели выбора без всплывающего окна.
  • size — "small", "medium", "large" для изменения размера поля.
  • show-prepend и show-append — позволяют добавлять кастомные элементы слева и справа от поля цвета.

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

<n-color-picker
  v-model:value="color"
  inline
  size="large"
/>

Работа с реактивными данными

Цвет может быть связан с другими компонентами интерфейса через реактивные переменные. Это позволяет создавать динамическое взаимодействие, например, изменение цвета фона элемента в реальном времени.

<div :style="{ backgroundColor: color }" class="color-box"></div>
<n-color-picker v-model:value="color" />

Продвинутые возможности

  • Custom Color Format: можно передавать цвет в виде объекта { r, g, b, a } или { h, s, l, a }.
  • Controlled Mode: позволяет полностью контролировать значение цвета из родительского компонента без использования v-model.
  • Preset Color Panels: можно создавать группы заранее определённых цветов с заголовками и разделителями.
<n-color-picker
  v-model:value="color"
  :preset-colors="[
    { label: 'Основные', colors: ['#f5222d', '#faad14', '#52c41a'] },
    { label: 'Дополнительно', colors: ['#13c2c2', '#722ed1'] }
  ]"
/>

Совместимость с формами

NFormItem и NColorPicker легко интегрируются для работы с валидацией:

<n-form :model="form" :rules="rules">
  <n-form-item label="Выбор цвета" path="color">
    <n-color-picker v-model:value="form.color" />
  </n-form-item>
</n-form>

<script setup>
import { reactive } from 'vue'

const form = reactive({ color: '#1890ff' })
const rules = {
  color: [
    { required: true, message: 'Цвет обязателен', trigger: 'blur' }
  ]
}
</script>

Итоговые рекомендации

  • Использовать preset-colors для ускорения выбора стандартных цветов.
  • Включать show-alpha только при необходимости прозрачности.
  • Настраивать format для унификации формата цвета во всём приложении.
  • При работе с формами комбинировать с NFormItem для валидации.

Color Picker Naive UI — гибкий инструмент, полностью адаптируемый под интерфейс любого уровня сложности, от простых форм до сложных дизайнерских панелей.

Оглавление