ColorPicker 颜色选择器

用于颜色选择，支持基础色板、完整调色板、弹窗模式和多种色值格式。

参照 TDesign 的颜色选择器面板实现，支持基础色板、完整调色板和弹窗模式。

演示

9:41

代码示例

<!-- 基础颜色选择器 -->
  <re-color-picker class="demo-base" @change="onBaseChange" />

<!-- 带色板的颜色选择器 -->
  <re-color-picker class="demo-multiple" type="multiple" enable-alpha @change="onMultipleChange" />

<!-- 弹窗形式的颜色选择器 -->
  <re-color-picker class="demo-popup-picker" type="multiple" enable-alpha use-popup :visible="popupVisible" @update:visible="onPopupVisibleChange" @change="onPopupChange" />

<!-- 组件模式选择 -->
  <re-color-picker class="demo-format-picker" type="multiple" enable-alpha :format="currentFormat" @change="onFormatChange" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-color-picker />。

API

ColorPicker Props

名称	类型	默认值	描述	必传
autoClose	`boolean`	true	自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible	N
enableAlpha	`boolean`	false	是否开启透明通道	N
fixed	`boolean`	false	如果 color-picker 位于固定定位或滚动容器中，可在外部滚动后重新触发尺寸测量	N
format	`string`	"RGB"	格式化色值。支持 HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS	N
popupProps	`UTSJSONObject \| null`	null	透传弹窗属性，支持 showOverlay/zIndex/safeAreaInsetBottom/overlayProps/customStyle	N
swatchColors	`Array<string>`	内置系统色	系统预设的颜色样例，传则不显示系统色	N
type	`string`	"base"	颜色选择器类型，base 表示仅展示系统预设内容；multiple 表示展示色板和系统预设内容	N
usePopup	`boolean`	false	是否使用弹出层包裹颜色选择器	N
value	`string`	""	色值	N
defaultValue	`string`	""	色值，非受控属性	N
visible	`boolean`	false	是否显示颜色选择器，usePopup 为 true 时有效	N
customStyle	`string`	""	自定义样式	N

ColorPicker Events

名称	参数	描述
change	detail: UTSJSONObject	值变化时触发
palette-bar-change	detail: UTSJSONObject	-
close	detail: UTSJSONObject	关闭时触发
update:visible	value: boolean	显隐变化时触发

ColorPicker Slots

名称	描述
header	-
footer	-

CodeInput 验证码输入

多位验证码逐格输入，支持密码遮罩和自定义长度

DateTimePicker 日期时间选择器

日期时间选择器，支持多种模式：日期、时间、日期时间、年、月

内容锚点

演示
代码示例
引入
API