ColorPicker

ColorPicker (색상 선택기)

출처: 문서

ColorPicker는 다양한 색상 형식을 지원하는 색상 선택기예요.

ColorPicker는 v-model에 바인딩될 string 타입 변수가 필요해요.

import { ref } from 'vue'

const color1 = ref('#409EFF')
const color2 = ref()

.demo-color-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.demo-color-block .demonstration {
  margin-right: 16px;
}

ColorPicker는 알파 채널 선택을 지원해요. 알파 선택을 활성화하려면 show-alpha 속성을 추가하면 돼요.

ColorPicker는 사전 정의된 색상 옵션을 지원해요.

import { ref } from 'vue'

const color = ref('#409EFF')

.demo-color-sizes .el-color-picker:not(:last-child) {
  margin-right: 16px;
}

Name	Description	Type	Default
model-value / v-model	바인딩 값	string	—
disabled	ColorPicker 비활성화 여부	boolean	false
clearable 2.13.1	클리어 버튼 표시 여부	boolean	true
size	ColorPicker의 크기	enum	—
show-alpha	알파 슬라이더 표시 여부	boolean	false
color-format	v-model의 색상 형식	enum	enum
popper-class	ColorPicker 드롭다운의 커스텀 클래스 이름	string / object	''
popper-style 2.11.4	ColorPicker 드롭다운의 커스텀 스타일	string / object	—
predefine	사전 정의된 색상 옵션	array	—
validate-event	폼 검증 트리거 여부	boolean	true
tabindex	ColorPicker tabindex	string / number	0
aria-label a11y 2.7.2	ColorPicker aria-label	string	—
empty-values 2.10.3	컴포넌트의 빈 값, config-provider 참고	array	—
value-on-clear 2.10.3	클리어 반환 값, config-provider 참고	string / number / boolean / Function	—
id	ColorPicker id	string	—
teleported 2.7.2	color-picker popper를 body로 텔레포트할지 여부	boolean	true
label a11y deprecated	ColorPicker aria-label	string	—
persistent 2.10.5	color-picker가 비활성 상태이고 persistent가 false면 색상 패널이 파괴돼요	boolean	true
append-to 2.10.5	color-picker 패널이 붙는 대상 요소	CSSSelector / HTMLElement	-