介绍
用于颜色选择,基础交互为饱和度-明度面板搭配色相滑块;开启 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 | 是否启用透明度选择 | boolean | false |
| format | 输出颜色格式 | hex | rgb | hsl | hex |
| show-format | 是否启用格式选择 | boolean | false |
| presets | 预定义颜色列表 | string[] | - |
| show-presets | 是否启用预设颜色选择 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
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