Sard

Appearance

100%
在新窗口打开⤴

ColorPicker颜色选择器

介绍 ​

用于颜色选择，基础交互为饱和度-明度面板搭配色相滑块；开启 show-alpha 后可继续调节透明度。

代码演示 ​

基础用法 ​

使用 v-model 绑定当前选中的颜色。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

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

const color = ref('#1989FA')
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const color = ref('#1989FA')
</script>

选择透明度 ​

设置 show-alpha 属性启用透明度选择。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-alpha />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

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

const color = ref('rgba(25, 137, 250, 0.6)')
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-alpha />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const color = ref('rgba(25, 137, 250, 0.6)')
</script>

预定义颜色 ​

设置 show-presets 属性展示预定义颜色。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-presets />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

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

const color = ref('#2ECC71')
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-presets />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const color = ref('#2ECC71')
</script>

自定义预定义颜色 ​

使用 presets 属性设置预定义颜色。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-presets :presets="presets" />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

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

const presets = ['#1989FA', '#2ECC71', '#F59E0B', '#EF4444', '#8B5CF6']
const color = ref('#2ECC71')
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-presets :presets="presets" />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const presets = ['#1989FA', '#2ECC71', '#F59E0B', '#EF4444', '#8B5CF6']
const color = ref('#2ECC71')
</script>

颜色的格式 ​

可以使用 format 属性设置 hex、rgb、hsl 三种格式。

vue
<template>
  <s-flex vertical gap="large">
    <s-list card>
      <s-list-item>
        <s-color-picker v-model="hexColor" format="hex" show-alpha />
      </s-list-item>
      <s-list-item>HEX：{{ hexColor }}</s-list-item>
    </s-list>

    <s-list card>
      <s-list-item>
        <s-color-picker v-model="rgbColor" format="rgb" show-alpha />
      </s-list-item>
      <s-list-item>RGB：{{ rgbColor }}</s-list-item>
    </s-list>

    <s-list card>
      <s-list-item>
        <s-color-picker v-model="hslColor" format="hsl" show-alpha />
      </s-list-item>
      <s-list-item>HSL：{{ hslColor }}</s-list-item>
    </s-list>
  </s-flex>
</template>

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

const hexColor = ref('#1989FA')
const rgbColor = ref('rgba(25, 137, 250, 0.8)')
const hslColor = ref('hsl(210, 96%, 54%)')
</script>
vue
<template>
  <s-flex vertical gap="large">
    <s-list card>
      <s-list-item>
        <s-color-picker v-model="hexColor" format="hex" show-alpha />
      </s-list-item>
      <s-list-item>HEX：{{ hexColor }}</s-list-item>
    </s-list>

    <s-list card>
      <s-list-item>
        <s-color-picker v-model="rgbColor" format="rgb" show-alpha />
      </s-list-item>
      <s-list-item>RGB：{{ rgbColor }}</s-list-item>
    </s-list>

    <s-list card>
      <s-list-item>
        <s-color-picker v-model="hslColor" format="hsl" show-alpha />
      </s-list-item>
      <s-list-item>HSL：{{ hslColor }}</s-list-item>
    </s-list>
  </s-flex>
</template>

<script setup lang="js">
import { ref } from 'vue'
const hexColor = ref('#1989FA')
const rgbColor = ref('rgba(25, 137, 250, 0.8)')
const hslColor = ref('hsl(210, 96%, 54%)')
</script>

允许切换格式 ​

设置 show-format 属性可以让用户自行设置格式。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-presets show-alpha show-format />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

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

const color = ref('rgba(25, 137, 250, 0.6)')
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-color-picker v-model="color" show-presets show-alpha show-format />
    </s-list-item>
    <s-list-item>当前颜色：{{ color }}</s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const color = ref('rgba(25, 137, 250, 0.6)')
</script>

API ​

ColorPickerProps ​

属性描述类型默认值
model-value当前颜色值string#1989FA
show-alpha是否启用透明度选择booleanfalse
format输出颜色格式hex | rgb | hslrgb
show-format是否启用格式选择booleanfalse
presets预定义颜色列表string[]-
show-presets是否启用预设颜色选择booleanfalse
disabled是否禁用booleanfalse
readonly是否只读booleanfalse

ColorPickerEmits ​

事件描述类型
update:modelValue颜色值变化时触发(value: string) => void
change颜色值变化时触发(value: string) => void
update:format切换颜色格式时触发(format: ColorFormat) => void
format-change切换颜色格式时触发(format: ColorFormat) => void

ColorFormat ​

ts
type ColorFormat = 'hex' | 'rgb' | 'hsl'

Released under the MIT License.

Copyright © 2023-present wuzhitao