使いやすい
シンプルな v-model API。角丸とトランジションを備えた洗練された UI
vColorPickerVue 3 カラーピッカー
軽量でアクセシブルな Vue 3 カラーピッカーコンポーネント
選択中の色: #ff0000
英語表示: #3b82f6
日本語表示: #10b981
<template>
<colorPicker
v-model="color"
locale="ja-JP"
:messages="{ moreColors: 'カスタムラベル...' }"
/>
</template>デフォルトではビューポートの空きスペースに応じて自動配置されます。placement プロパティで任意の方向に固定することもできます。
top-end に固定: #f59e0b
<colorPicker v-model="color" placement="top-end" />
<colorPicker v-model="color" placement="bottom" /> <!-- 縦方向のみ固定、横方向は自動 -->ピッカーが overflow: hidden を持つコンテナ（テーブル、ダイアログ、カードなど）の中にあると、パネルが切り取られることがあります。teleport を設定すると、パネルを document.body（または任意の CSS セレクタ）に描画し、スクロールやリサイズに追従する fixed 配置になります。
<colorPicker v-model="color" teleport />
<colorPicker v-model="color" teleport="#popup-root" />npm install vcolorpicker -Smain.js でプラグインを登録します：
import { createApp } from 'vue'
import vcolorpicker from 'vcolorpicker'
import App from './App.vue'
const app = createApp(App)
app.use(vcolorpicker)
app.mount('#app')コンポーネント内で使用します：
<template>
<colorPicker v-model="color" />
</template>
<script setup>
import { ref } from 'vue'
const color = ref('#ff0000')
</script>| プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|
v-model / modelValue | string | — | 現在の色の値 |
defaultColor | string | #000000 | 「デフォルトカラー」ボタンでリセットされる色 |
disabled | boolean | false | 無効状態 |
locale | 'zh-CN' | 'en-US' | 'ja-JP' | 自動検出 | パネルの組み込み文言の言語。省略時は <html lang> / navigator.language に追従 |
messages | Partial<ColorPickerMessages> | — | 組み込みラベルをカスタム文言で上書き |
placement | ColorPickerPlacement | 'auto' | パネル位置：'auto' / 'top' / 'bottom' / 'top-start' / 'top-end' / 'bottom-start' / 'bottom-end'。'auto' はビューポートの空きスペースで自動決定、方向指定時はその軸を固定 |
teleport | boolean | string | false | パネルを body（true）または CSS セレクタで指定したコンテナに描画し、祖先の overflow: hidden による切り取りを回避 |
| イベント名 | 引数 | 説明 |
|---|---|---|
change | (color: string) | 色の値が変更されたとき |
update:modelValue | (color: string) | v-model 同期イベント |
open | — | パネルが開いたとき |
close | — | パネルが閉じたとき（外側クリック / Esc / 色選択後の自動クローズ） |
hover | (color: string) | スウォッチにホバーしたとき。離れると空文字列を送出 |
<colorPicker v-model="color" @change="onColorChange" />テンプレート ref 経由で公開されるメソッド：
<script setup lang="ts">
import { ref } from 'vue'
import type { ColorPickerInstance } from 'vcolorpicker'
const pickerRef = ref<ColorPickerInstance>()
const color = ref('#ff0000')
const openProgrammatically = () => pickerRef.value?.open()
</script>
<template>
<colorPicker ref="pickerRef" v-model="color" />
<button @click="openProgrammatically">パネルを開く</button>
</template>| メソッド | 説明 |
|---|---|
open() | パネルを開く（disabled 時は無効） |
close() | パネルを閉じる |
focus() | フォーカスをトリガーボタンに戻す |
Tab でフォーカス可能。Enter / Space で開閉、フォーカス中に ↑ / ↓ を押すとパネルを開いて最初のスウォッチにフォーカスTab 一回でグリッドに入り、← → ↑ ↓ でスウォッチ間を移動、Home / End で行頭 / 行末へジャンプ、Enter / Space で選択Esc を押すと閉じてフォーカスをトリガーに戻すrole="button" + aria-haspopup="dialog" + aria-expanded、パネルは role="dialog"、各スウォッチは aria-label="#RRGGBB" を持つ:focus-visible を使用し、マウス操作時には表示されないdocument / navigator が存在しない場合、初期ロケールは zh-CN（または明示的な locale プロパティ）に固定され、サーバーとクライアントのファーストペイントが一致するため hydration mismatch は発生しませんonMounted 後に実行されます。マウント後に中国語から別の言語へ切り替わるちらつきを避けたい場合は、SSR プロジェクトでは明示的に locale プロパティを渡すことを推奨します<html lang> を監視する MutationObserver はモジュールレベルのシングルトンで、複数インスタンスでも 1 つの observer を共有しますセレクタの深掘りなしで、以下のカスタムプロパティを上書きするだけでテーマを変更できます：
.m-colorPicker {
--vcp-swatch-size: 15px;
--vcp-panel-width: 190px;
--vcp-panel-bg: #fff;
--vcp-panel-border: 1px solid #ddd;
--vcp-panel-radius: 2px;
--vcp-panel-shadow: 0 8px 24px rgba(0, 0, 0, .18);
--vcp-panel-padding: 10px;
--vcp-text-color: #333;
--vcp-focus-color: #4e81bb;
--vcp-transition: .3s ease;
--vcp-z-index: 10000;
}例：ダークテーマ
.dark .m-colorPicker {
--vcp-panel-bg: #1f1f1f;
--vcp-panel-border: 1px solid #333;
--vcp-text-color: #eee;
}
teleportを有効にするとパネルは.m-colorPickerの子孫ではなくなるため、テーマ変数は.m-colorPicker-box（パネルのルート）にも上書きするか、:rootに定義して両方をカバーしてください。
パッケージからエクスポートされる型：
import type {
ColorPickerProps,
ColorPickerEmits,
ColorPickerExposed,
ColorPickerInstance,
ColorPickerLocale,
ColorPickerMessages,
ColorPickerPlacement
} from 'vcolorpicker'はい。vColorPicker は Vue 3 向けに設計されており、標準的な v-model API で利用できます。
はい。locale="zh-CN"、locale="en-US"、locale="ja-JP" で組み込みの翻訳を利用でき、messages で任意のラベルを上書きすることもできます。
はい。パッケージには props、emits、インスタンスメソッド、ヘルパー型を含む完全な型宣言が同梱されています。
はい。その他のカラー... をクリックすると、対応ブラウザでは HTML5 ネイティブの color input が開きます。
はい。Tab でフォーカス、Enter / Space で操作、Esc で閉じることができ、ARIA ロールとラベルもすべて設定済みです。