ColorPickerPanel 颜色选择器面板 ^(beta)

ColorPickerPanel是ColorPicker的核心组件。

基础用法

ColorPickerPanel 需要一个字符串类型的变量才能绑定到 v-model。

选择透明度

ColorPickerPanel 支持Alpha 通道选择。要激活 Alpha 选择，只需添加 "show-alpha" 属性。

预定义颜色

颜色选择板支持预定义的颜色选项

export function ColorPickerPanelPredefinedColor() {  const [color, setColor] = useState<string | null>("rgba(255, 69, 0, 0.68)");  return (    <ElColorPickerPanel      value={color}      showAlpha      predefine={PREDEFINE_COLORS}      onChange={setColor}    />  );}

Border 边框

默认情况下，边框是默认的，如果你不想要边框请参考示例。

No border:

export function ColorPickerPanelBorder() {  const [color, setColor] = useState<string | null>("#ff6900");  const [isNarrow, setIsNarrow] = useState(true);  const containerRef = useRef<HTMLDivElement>(null);  useEffect(() => {    const container = containerRef.current;    if (!container) return;    const observer = new ResizeObserver(([entry]) => {      setIsNarrow(entry.contentRect.width < 815);    });    observer.observe(container);    return () => observer.disconnect();  }, []);  return (    <div ref={containerRef}>      <div style={{ textAlign: "center" }}>No border:</div>      <ElDivider />      <div        style={{          display: "flex",          flexWrap: "wrap",          justifyContent: "center",          gap: "16px",        }}      >        <div style={{ padding: "20px" }}>          <ElColorPickerPanel            value={color}            border={false}            onChange={setColor}          />        </div>        <ElDivider          style={{ height: "auto" }}          direction={isNarrow ? "horizontal" : "vertical"}        />        <ElCard>          <ElColorPickerPanel            value={color}            border={false}            onChange={setColor}          />        </ElCard>      </div>    </div>  );}

禁用

"禁用"属性决定颜色选择器是否完全禁用。

export function ColorPickerPanelDisabled() {  const [color, setColor] = useState<string | null>("#ff6900");  return (    <ElColorPickerPanel      value={color}      disabled      showAlpha      predefine={PREDEFINE_COLORS.slice(0, 7)}      onChange={setColor}    />  );}

ColorPickerPanel API

Attributes

属性名	说明	类型	默认值
value	绑定值，对应官方 model-value	`string`	—
border	是否显示边框	`boolean`	true
disabled	是否禁用	`boolean`	false
showAlpha	是否显示透明度滑块	`boolean`	false
colorFormat	绑定值的颜色格式	`enum`	showAlpha 为 false 时 'hex'，为 true 时 'rgb'
predefine	预定义颜色	`array`	—
validateEvent	是否触发表单校验	`boolean`	true
hueSliderClass	透传给色相滑块的类名	`string`	—
hueSliderStyle	透传给色相滑块的样式	`object`	—
className	根节点类名	`string`	—
style	根节点样式	`object`	—

Events

事件名	说明	参数
onChange	绑定值变化时触发	`Function`

Slots（React Render Props / ReactNode）

名称	说明	类型
footer	底部输入框之后的内容	`ReactNode`

Exposes

名称	说明	类型
color	当前颜色对象	`object`
inputRef	底部输入框的原生 input	`object`
update	手动刷新子组件	`Function`