t-picker-color

PickerColor 颜色选择器

组件介绍

t-picker-color 是颜色选择器组件，采用自研 canvasflex 布局渲染引擎实现，支持颜色选择和预览。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/color/color.uvue，通过 v-model 绑定选中的颜色值。

<template>
  <t-picker-color 
    v-model="selectedColor"
    @confirm="onConfirm">
  </t-picker-color>
</template>

<script setup>
const selectedColor = ref('#F44336')

function onConfirm(color: string) {
  console.log('选中的颜色：', color)
}
</script>

Props

属性名	说明	类型	默认值
modelValue	绑定的颜色值	string	'#F44336'
buttonClass	按钮样式	string	-
buttonIconClass	按钮图标样式	string	-
popupAttrs	t-popup 的属性	UTSJSONObject	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'medium'

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	color: string
change	颜色变化时触发	color: string
cancel	点击取消按钮时触发	-

Slots

插槽名	说明
default	默认插槽，自定义触发按钮