Color (颜色面版)

非webview，采用Draw绘制,流畅丝滑不卡顿,支持透明通道显示

支持平台

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

示例代码

html

<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(镂空)
type	`String`	`p`	组件的主题类型
modelValue	`String`	`#FFFFFF`	面版默认颜色值

事件

名称	返回参数	说明
change	`十六进制颜色值`	颜色值发生变时触发

Color (颜色面版) ​

支持平台 ​

示例代码 ​

属性 ​

事件 ​

Color (颜色面版)

支持平台

示例代码

属性

事件