# t-color

Color 颜色

t-color 组件介绍

t-color 是一个颜色面板组件，采用自研canvasflex布局渲染引擎实现，支持多种颜色格式选择。组件提供了直观的颜色选择界面，包括颜色区域选择、色相条调整、透明度调整等功能，适用于需要颜色选择功能的场景，如主题设置、样式配置等。

t-color 平台兼容

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

t-color 基础用法

基础用法参考 demo/color/color.uvue，通过 v-model 绑定颜色值，点击颜色按钮打开颜色选择面板。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title='Color 颜色选择器'
				sub-title="自研canvas flex布局渲染引擎实现,5.0重构为全canvas绘制，只绘制滑块。其它区域使用缓存不需重绘，运行流畅"></t-card>
		<t-color v-model="color"
				 :embeddable="true"
				 @change="onchange"></t-color>
		<t-color v-model="color1">
		</t-color>
		<t-button @click="color1='#f56c6c'"
				  class="mt-15"
				  type="primary">双向绑定测试</t-button>
	</view>
</template>

<script setup>
	const color = ref<string>('rgba(103,58,183,1)')
	const color1 = ref<string>('rgba(255, 85, 0, 1.0)')
	function onchange(e : string) {
		// console.log(e)
	}
</script>

t-color Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
embeddable	是否嵌入模式	boolean	false
modelValue	当前颜色值	string	'#FFFFFF'
buttonClass	颜色按钮的样式	any	''
buttonIconClass	颜色按钮图标的样式	any	''
popupAttrs	弹窗属性	UTSJSONObject	{}

t-color Events

事件名	说明	回调参数
change	颜色变化时触发	string
update:modelValue	绑定值变化时触发	string
cancel	取消选择时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
transitionend	动画结束时触发	-

t-color Slots

插槽名	说明
default	默认插槽，用于自定义颜色按钮的显示