颜色选择 ColorPicker

用于颜色选择，支持 HEX 和 RGB 格式、透明度调节、多种尺寸。

基础用法

通过 v-model 绑定颜色值，默认为 HEX 格式。

<template>
  <bp-color-picker v-model="val" valueType="hex"></bp-color-picker>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref("#4695ed");
</script>

颜色格式

通过 value-type 属性设置颜色值格式，支持 hex（默认）和 rgb。

HEX 格式（默认）

当前值：#165dff

RGB 格式

当前值：rgba(22, 93, 255, 1)

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">HEX 格式（默认）</div>
      <bp-color-picker v-model="hexVal" />
      <div class="value">当前值：{{ hexVal }}</div>
    </div>
    <div>
      <div class="label">RGB 格式</div>
      <bp-color-picker v-model="rgbVal" value-type="rgb" />
      <div class="value">当前值：{{ rgbVal }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const hexVal = ref("#165dff");
const rgbVal = ref("rgba(22, 93, 255, 1)");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

尺寸

通过 size 属性设置尺寸，支持 mini、small、default、large。

mini

small

default

large

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">mini</div>
      <bp-color-picker v-model="val" size="mini" />
    </div>
    <div>
      <div class="label">small</div>
      <bp-color-picker v-model="val" size="small" />
    </div>
    <div>
      <div class="label">default</div>
      <bp-color-picker v-model="val" />
    </div>
    <div>
      <div class="label">large</div>
      <bp-color-picker v-model="val" size="large" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#165dff");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

形状

通过 shape 控制触发器形状：square（圆角矩形，默认）、circle（圆形）。

圆角矩形

圆形

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">圆角矩形</div>
      <bp-color-picker v-model="val" shape="square" />
    </div>
    <div>
      <div class="label">圆形</div>
      <bp-color-picker v-model="val" shape="circle" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#165dff");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

显示色值

开启 show-value 后，在触发器旁展示当前颜色值。

方块 + 色值

#165dff

圆形 + 色值

#165dff

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap">
    <div>
      <div class="label">方块 + 色值</div>
      <bp-color-picker v-model="val" show-value />
    </div>
    <div>
      <div class="label">圆形 + 色值</div>
      <bp-color-picker v-model="val" shape="circle" show-value />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#165dff");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

禁用

通过 disabled 属性禁用颜色选择器。

正常

禁用

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">正常</div>
      <bp-color-picker v-model="val" />
    </div>
    <div>
      <div class="label">禁用</div>
      <bp-color-picker v-model="val" disabled />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("#86909c");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

ColorPicker 属性

v-model	绑定值	String	#165dff	-
hide-trigger	是否隐藏触发器	Boolean	-	-
value-type	颜色值类型	String	hex	-
size	尺寸	String	default	-
shape	触发器形状	ColorPickerShape	square	-
show-value	是否在触发器旁显示颜色值	Boolean	-	-
disabled	是否禁用	Boolean	-	-