颜色选择器 ColorPicker

用于选择和展示颜色

基本使用

基本用法

---

代码事例

<template>
  <fk-space>
    <fk-color-picker  v-model="value" />
    <fk-color-picker default-value="#165DFF" show-text disabled-alpha/>
  </fk-space>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('#165DFF')
</script>

尺寸

颜色选择器定义了四种尺寸（mini,small, medium, large），分别为 24px，28px，32px，36px。

---

代码事例

<template>
  <fk-space>
    <fk-color-picker default-value="#165DFF" size="mini" />
    <fk-color-picker default-value="#165DFF" size="small" />
    <fk-color-picker default-value="#165DFF" size="medium" />
    <fk-color-picker default-value="#165DFF" size="large" />
  </fk-space>
</template>

禁用

设置 disabled 禁用选择器。

---

代码事例

<template>
  <fk-space>
    <fk-color-picker default-value="#165DFF" disabled />
    <fk-color-picker default-value="#165DFF" show-text disabled />
  </fk-space>
</template>

颜色格式

通过 format 设置颜色值的格式，支持 hex 和 rgb。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-radio-group v-model="format" type="button">
      <fk-radio v-for="item in formatList" :key="item" :value="item">{{item}}</fk-radio>
    </fk-radio-group>
    <fk-color-picker default-value="#165DFF" :format="format" show-text />
  </fk-space>
</template>

<script setup>
import { ref } from 'vue';

const format = ref('hex')
const formatList = ['hex', 'rgb']
</script>

预设颜色和历史颜色

通过 showPreset 和 showHistory 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。

---

代码事例

<template>
  <fk-color-picker
    default-value="#165DFF"
    :history-colors="history"
    show-history
    show-preset
    @popup-visible-change="addHistory"
  />
</template>

<script setup>
import { ref } from 'vue';

const history = ref(['#165DFF'])
const addHistory = (visible, color) => {
  if (!visible) {
    const index = history.value.indexOf(color);
    if (index !== -1) {
      history.value.splice(index, 1);
    }
    history.value.unshift(color);
  }
}
</script>

触发器

可以通过 trigger-props 设置触发器的所有属性。

---

代码事例

<template>
  <fk-space direction="vertical">
    <fk-switch v-model="triggerProps.popupVisible">
      <template #checked> ON </template>
      <template #unchecked>OFF</template>
    </fk-switch>
    <fk-color-picker default-value="#165DFF" :trigger-props="triggerProps" />
  </fk-space>
</template>

<script setup>
import { ref } from 'vue';

const triggerProps = ref({
  popupVisible: false,
  unmountOnClose: true,
  position: 'rt'
})
</script>

自定义触发元素

自定义触发元素。

---

代码事例

<template>
  <fk-space>
    <fk-color-picker v-model="value" size="mini" >
      <fk-tag :color="value">
        <template #icon>
          <icon-bg-colors style="color: #fff" />
        </template>
        {{value}}
      </fk-tag>
    </fk-color-picker>
  </fk-space>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('#165DFF');
</script>

只使用面板

只用颜色选择面板。

---

代码事例

<template>
  <fk-space :size="32">
    <fk-color-picker default-value="#165DFF" hide-trigger show-history show-preset/>
    <fk-color-picker default-value="#12D2AC" disabled hide-trigger show-preset/>
  </fk-space>
</template>

API

<color-picker> Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	string	-
default-value	默认值（非受控状态）	string	-
format	颜色值的格式	'hex' | 'rgb'	-
size	尺寸	'mini' | 'small' | 'medium' | 'large'	'medium'
show-text	显示颜色值	boolean	false
show-history	显示历史颜色	boolean	false
show-preset	显示预设颜色	boolean	false
disabled	禁用	boolean	false
disabled-alpha	禁用透明通道	boolean	false
hide-trigger	没有触发元素，只显示颜色面板	boolean	false
trigger-props	接受所有 Trigger 组件的Props	Partial<TriggerProps>	-
history-colors	历史颜色的颜色数组	string[]	-
preset-colors	预设颜色的颜色数组	string[]	() => colors

<color-picker> Events

事件名	描述	参数
change	颜色值改变时触发	value: string
popup-visible-change	颜色面板展开和收起时触发	visible: boolean value: string