ColorPicker 颜色选择器 1.1.6

手机扫码预览

17:42

组件名：rice-color-picker

颜色选择器，请使用真机预览，右侧模拟器无法滑动

平台兼容性

uni-app x

Android	iOS	iOS(Vapor)	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√	√	√	√	√	√

基本使用

绑定的颜色值,只支持HEX/RGB/RGBA三种格式

vue

<template>
  <rice-color-picker v-model="color" :preset-colors="presetColors" @changing="onChanging" @change="onChange" />
</template>
<script setup lang="ts">
const color = ref('#2e5780')
const presetColors = ref(['#81A1FF', '#5A83F4', '#2F67E4', '#1A4FBE', '#153A8D', '#112A69',
  ' #FAF5FF', '#F3E8FF', '#A78BFA', '#8B5CF6', '#7C3AED',
  'rgba(144, 240, 144, 0.5)', 'rgba(72,23,43,.6)'])

//一次交互结束后触发，例如手指松开滑块，输入框失焦，点击底部预置色或结束面板拖动
const onChange = (val : string) => {}
//拖动颜色面板、色相滑块、透明度滑块的过程中持续触发
const onChanging = (val : string) => {}

</script>

使用Popup

vue

<template>
  <rice-popup v-model:show="show" close-on-slide-down :closeable="false" radius="8px" :close-on-click-overlay="false">
    <text class="title">搭配Popup可下滑关闭</text>
    <rice-color-picker panel-class="panel-class" preview-class="preview-class"/>
    <view class="btn">
      <rice-button type="primary" plain-fill text="取消" style="flex:1" @click="show=false" />
      <rice-button type="primary" text="确认" style="flex:1;margin-left:16px" @click="onConfirm" />
    </view>
  </rice-popup>
</template>

禁用输入框和切换

disabled-input 为 false 可以禁用输入框输入
disabled-switch 为 false 可以禁用格式的切换，此时格式会根据绑定的值自动适配

vue

<rice-color-picker disabled-input disabled-switch :show-alpha="false" />

ColorPicker Props

参数	说明	类型	默认值
v-model/mode-value	绑定的颜色值,只支持HEX/RGB/RGBA三种格式	-
presetColors	显示在底部的预设色	string[]	[]
showAlpha	是否显示透明色的滑块	boolean	`true`
disabledInput	是否禁用输入框	boolean	`false`
disabledSwitch	是否禁用格式切换	boolean	`false`
panelClass	色板的class，小程序里面设置的样式属性如不生效需要使用 !important	string	-
previewClass	预览色块的class，即滑块左边的色块	string	-

Events

事件名	说明	回调参数
change	一次交互结束后触发，例如手指松开滑块，输入框失焦，点击底部预置色或结束面板拖动	`value:string`
changing	拖动颜色面板、色相滑块、透明度滑块的过程中持续触发	`value:string`

事件的区别

changing

触发时机：拖动颜色面板、色相滑块、透明度滑块的过程中持续触发
触发频率：高频触发，手指移动时会连续回调
返回值：当前实时颜色字符串，格式与组件当前输出格式保持一致
典型用途：实时预览、动态更新标题、联动背景色、展示当前拖动中的颜色值

change

触发时机：一次交互结束后触发，例如手指松开滑块，输入框失焦，点击底部预置色或结束面板拖动
触发频率：低频触发，一次完整交互通常只触发一次
返回值：最终确认后的颜色字符串

如何选择

如果你的业务需要边拖边看效果，请监听 changing。

如果你的业务只关心用户最终选中的结果，请监听 change。

Tip

在 HEX 模式下，组件会根据当前透明度自动输出 6 位或 8 位十六进制颜色值：

当透明度为 100% 时，输出 #RRGGBB 当透明度小于 100% 时，输出 #RRGGBBAA

其中：RRGGBB 表示红、绿、蓝颜色通道; AA 表示透明度通道

ColorPicker 颜色选择器 1.1.6 ​

平台兼容性 ​

uni-app x ​

基本使用 ​

使用Popup ​

禁用输入框和切换 ​

ColorPicker Props ​

Events ​

事件的区别 ​

changing ​

change ​

Tip ​