Sard Uniapp

Appearance

在新窗口打开⤴

ColorPicker颜色选择器1.29+

介绍 ​

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

引入 ​

ts
import ColorPicker from 'sard-uniapp/components/color-picker/color-picker.vue'

代码演示 ​

基础用法 ​

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

vue
<template>
  <sar-list card>
    <sar-list-item class="px-0 py-20">
      <sar-color-picker v-model="color" />
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
  </sar-list>
</template>

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

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

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

选择透明度 ​

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

vue
<template>
  <sar-list card>
    <sar-list-item class="px-0 py-20">
      <sar-color-picker v-model="color" show-alpha />
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
  </sar-list>
</template>

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

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

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

预定义颜色 ​

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

vue
<template>
  <sar-list card>
    <sar-list-item class="px-0 py-20">
      <sar-color-picker v-model="color" show-presets />
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
  </sar-list>
</template>

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

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

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

自定义预定义颜色 ​

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

vue
<template>
  <sar-list card>
    <sar-list-item class="px-0 py-20">
      <sar-color-picker v-model="color" show-presets :presets="presets" />
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
  </sar-list>
</template>

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

const presets = ['#1989FA', '#2ECC71', '#F59E0B', '#EF4444', '#8B5CF6']
const color = ref('#2ECC71')
</script>
vue
<template>
  <sar-list card>
    <sar-list-item class="px-0 py-20">
      <sar-color-picker v-model="color" show-presets :presets="presets" />
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
  </sar-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>
  <sar-space direction="vertical" size="large">
    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hexColor" format="hex" show-alpha />
      </sar-list-item>
      <sar-list-item>HEX：{{ hexColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="rgbColor" format="rgb" show-alpha />
      </sar-list-item>
      <sar-list-item>RGB：{{ rgbColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hslColor" format="hsl" show-alpha />
      </sar-list-item>
      <sar-list-item>HSL：{{ hslColor }}</sar-list-item>
    </sar-list>
  </sar-space>
</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>
  <sar-space direction="vertical" size="large">
    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hexColor" format="hex" show-alpha />
      </sar-list-item>
      <sar-list-item>HEX：{{ hexColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="rgbColor" format="rgb" show-alpha />
      </sar-list-item>
      <sar-list-item>RGB：{{ rgbColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hslColor" format="hsl" show-alpha />
      </sar-list-item>
      <sar-list-item>HSL：{{ hslColor }}</sar-list-item>
    </sar-list>
  </sar-space>
</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>
  <sar-space direction="vertical" size="large">
    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hexColor" format="hex" show-alpha />
      </sar-list-item>
      <sar-list-item>HEX：{{ hexColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="rgbColor" format="rgb" show-alpha />
      </sar-list-item>
      <sar-list-item>RGB：{{ rgbColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hslColor" format="hsl" show-alpha />
      </sar-list-item>
      <sar-list-item>HSL：{{ hslColor }}</sar-list-item>
    </sar-list>
  </sar-space>
</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>
  <sar-space direction="vertical" size="large">
    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hexColor" format="hex" show-alpha />
      </sar-list-item>
      <sar-list-item>HEX：{{ hexColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="rgbColor" format="rgb" show-alpha />
      </sar-list-item>
      <sar-list-item>RGB：{{ rgbColor }}</sar-list-item>
    </sar-list>

    <sar-list card>
      <sar-list-item class="px-0 py-20">
        <sar-color-picker v-model="hslColor" format="hsl" show-alpha />
      </sar-list-item>
      <sar-list-item>HSL：{{ hslColor }}</sar-list-item>
    </sar-list>
  </sar-space>
</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>

API ​

ColorPickerProps ​

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

ColorPickerEmits ​

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

ColorFormat ​

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

主题定制 ​

CSS 变量 ​

scss
// #variables
page,
.sar-portal {
  --sar-color-picker-padding: 0 32rpx 20rpx;
  --sar-color-picker-checker-bg: repeating-conic-gradient(
      from 0deg,
      #ccc 0deg 90deg,
      transparent 90deg 180deg
    )
    center / 24rpx 24rpx;
  --sar-color-picker-panel-height: 400rpx;
  --sar-color-picker-preview-size: 80rpx;
  --sar-color-picker-value-size: 64rpx;
  --sar-color-picker-slider-bar-height: 32rpx;
  --sar-color-picker-thumb-size: 36rpx;
}
// #endvariables

Released under the MIT License.

Copyright © 2023-present wuzhitao