ColorPicker 颜色选择器 ​

  <eb-space wrap>
    <eb-color-picker v-model="color" />
    <eb-text size="small" type="info">当前值：{{ color || '未选择' }}</eb-text>
  </eb-space>

  <eb-space wrap>
    <eb-color-picker v-model="preset" :predefine="predefine" />
    <eb-color-picker v-model="alpha" show-alpha />
    <eb-text size="small" type="info">透明通道值：{{ alpha || '未选择' }}</eb-text>
  </eb-space>

  <eb-space wrap>
    <eb-color-picker v-model="brandColor" @active-change="liveColor = $event" />
    <span :style="{ background: liveColor || brandColor, width: '24px', height: '24px', borderRadius: '6px', display: 'inline-block', border: '1px solid var(--eb-border-color)' }" />
    <eb-text size="small" type="info">实时值：{{ liveColor || '未拖动面板' }}</eb-text>
  </eb-space>

  <eb-space wrap>
    <eb-color-picker v-model="rgbColor" color-format="rgb" />
    <eb-text size="small" type="info">rgb：{{ rgbColor }}</eb-text>
    <eb-color-picker v-model="hslColor" color-format="hsl" />
    <eb-text size="small" type="info">hsl：{{ hslColor }}</eb-text>
    <eb-color-picker v-model="hexaColor" color-format="hexa" show-alpha />
    <eb-text size="small" type="info">hexa：{{ hexaColor }}</eb-text>
  </eb-space>

  <eb-space wrap size="middle">
    <eb-color-picker model-value="#F59E0B" disabled />
    <eb-color-picker v-model="largeColor" size="large" />
    <eb-color-picker v-model="smallColor" size="small" />
  </eb-space>