PickerColor (颜色面版)

是一个颜色选择器，从调色板中选择颜色。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page title='Color' main-class="p-30">
		<t-card main-class="mb-30" title='Color 颜色选择器' sub-title="非webview采用Draw绘制,流畅丝滑不卡顿,支持透明通道显示"></t-card>
		<t-section title="基础功能" main-class="mb-30"></t-section>
		<t-color main-class="tdr mb-30" v-model="colorValue" @change="colorChange"></t-color>
		<t-button @click="colorValue='#f56c6c'" main-class="mb-30" type="p">修改为红色</t-button>
		<t-section title="弹窗-表单中使用方法" main-class="mb-30"></t-section>
		<t-picker-color main-class="tdr mb-30" @confirm="colorConfirm" @cancel="colorCancel" @change="colorChange"
			modelValue="#0055ff">
			<t-button type="p">请选择主题色</t-button>
		</t-picker-color>
	</t-page>
</template>

<script setup>
	const color = ref('rgba(53,186,255,0.5)')
	const show = ref(false)
	const colorValue = ref('rgba(125, 30, 145, 1.0)')
	function colorCancel(e : string) {
		console.log('colorCancel', e)
	}
	function colorChange(e : string) {
		// console.log('colorChange', e)
	}
	function colorConfirm(e : string) {
		console.log('onConfirm', e)
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
label	String	请选择日期	标签
titleClass	String	``	标题文本样式
title	String	日历	标题
labelClass	String	``	标签样式
modelValue	String	#F44336	绑定的颜色值
buttonClass	String	``	按钮样式
buttonIconClass	String	``	按钮图标样式

事件

名称	返回参数	说明
change	(e : string)	值发生变化时触发
confirm	(e : string)	点击确认按钮时触发 返回当前面版的值
cancel	-	点击取消按钮时触发

方法

名称	参数	返回值	说明
show	-	-	打开，关闭颜色面版

插槽

名称	返回值	说明
default	-