Color 颜色面板组件

显示和选择颜色的组件，可以自定义颜色值和面板类型。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='Color' class="p.30">
		<t-card class="mb.30" title='Color 颜色选择器' sub-title="非webview采用Draw绘制,流畅丝滑不卡顿,支持透明通道显示"></t-card>
		<t-section title="基础功能" class="mb.30"></t-section>
		<t-color class="tdr-mb.30" @confirm="colorConfirm" :value="colorValue"></t-color>
		<t-button @click="colorValue='#f56c6c'">修改为红色</t-button>
		<t-section title="弹窗-表单中使用方法" class="mb.30"></t-section>
		<t-picker-color class="tdr-mb.30" @confirm="colorConfirm" value="#0055ff">
			<t-button>请选择主题色</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('#f8f8f8')
	function showPicker() {
		show.value = !show.value
	}
	function onConfirm(color : string) {
		uni.showModal({
			title: color
		})
	}
	function colorConfirm(e : string) {
		console.log(e)
	}
</script>

Props

名称	描述	类型	默认值	可选值
value	颜色值	String	'#FFFFFF'	-
type	面板类型	String	'p'	可能的类型

Events

事件名	描述	回调参数
change	颜色值变化时触发	(newValue)