Tui Plus Vapor

Appearance

t-color ​

Color 颜色

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <!-- 基础颜色选择 -->
  <t-color v-model="colorValue" class="mb-30"></t-color>
  <t-text>选中颜色: {{ colorValue }}</t-text>

  <!-- 嵌入模式颜色选择 -->
  <t-color v-model="embedColorValue" :embeddable="true" class="mb-30"></t-color>
  <t-text>嵌入模式选中颜色: {{ embedColorValue }}</t-text>

  <!-- 自定义颜色按钮样式 -->
  <t-color v-model="customColorValue" button-class="w-100 h-100 r-5" class="mb-30"></t-color>
  <t-text>自定义样式选中颜色: {{ customColorValue }}</t-text>
</template>

<script setup>
const colorValue = ref('#2979ff');
const embedColorValue = ref('#4caf50');
const customColorValue = ref('#ff9800');
</script>

Props ​

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

Events ​

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

Slots ​

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