Tu View PlusColorPicker 颜色选择框
用于选择和展示颜色。
基础用法
颜色选择框的基本用法。
#49629A
<template>
<tu-space :size="32">
<tu-color-picker v-model="value" />
<tu-color-picker defaultValue="#49629A" showText />
</tu-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('#49629A');
</script><template>
<tu-space :size="32">
<tu-color-picker v-model="value" />
<tu-color-picker defaultValue="#49629A" showText />
</tu-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('#49629A');
</script>禁用
设置 disabled 禁用选择器。
#49629A
<template>
<tu-space :size="32">
<tu-color-picker v-model="value" disabled />
<tu-color-picker defaultValue="#49629A" showText disabled />
</tu-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('#49629A');
</script><template>
<tu-space :size="32">
<tu-color-picker v-model="value" disabled />
<tu-color-picker defaultValue="#49629A" showText disabled />
</tu-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref('#49629A');
</script>颜色格式
通过 format 设置颜色值的格式，支持 hex 和 rgb。
hex
#49629A
rgb
rgb(73, 98, 154)
<template>
<tu-row>
<tu-col :span="8">
<p>hex</p>
<tu-color-picker defaultValue="#49629A" format="hex" showText />
</tu-col>
<tu-col :span="8">
<p>rgb</p>
<tu-color-picker defaultValue="#49629A" format="rgb" showText />
</tu-col>
</tu-row>
</template><template>
<tu-row>
<tu-col :span="8">
<p>hex</p>
<tu-color-picker defaultValue="#49629A" format="hex" showText />
</tu-col>
<tu-col :span="8">
<p>rgb</p>
<tu-color-picker defaultValue="#49629A" format="rgb" showText />
</tu-col>
</tu-row>
</template>预设颜色和历史颜色
通过 showPreset 和 showHistory 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。
<template>
<tu-color-picker
defaultValue="#49629A"
showHistory
showPreset
:historyColors="history"
@popup-visible-change="addHistory"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const history = ref<string[]>(['#49629A']);
const addHistory = (visible: boolean, color: string) => {
if (!visible) {
const index = history.value.indexOf(color);
if (index !== -1) {
history.value.splice(index, 1);
}
history.value.unshift(color);
}
};
</script><template>
<tu-color-picker
defaultValue="#49629A"
showHistory
showPreset
:historyColors="history"
@popup-visible-change="addHistory"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const history = ref<string[]>(['#49629A']);
const addHistory = (visible: boolean, color: string) => {
if (!visible) {
const index = history.value.indexOf(color);
if (index !== -1) {
history.value.splice(index, 1);
}
history.value.unshift(color);
}
};
</script>触发器
可以通过 trigger-props 设置触发器的所有属性。
<template>
<tu-space>
<tu-switch v-model="triggerProps.popupVisible"> </tu-switch>
<tu-color-picker defaultValue="#49629A" :trigger-props="triggerProps" />
</tu-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const triggerProps = ref({
popupVisible: false,
unmountOnClose: true
});
</script><template>
<tu-space>
<tu-switch v-model="triggerProps.popupVisible"> </tu-switch>
<tu-color-picker defaultValue="#49629A" :trigger-props="triggerProps" />
</tu-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const triggerProps = ref({
popupVisible: false,
unmountOnClose: true
});
</script>自定义触发器
自定义触发元素。
#49629A
<template>
<tu-color-picker v-model="value">
<tu-tag effect="dark" :color="value">
<template #icon><BrushFilled /></template>
{{ value }}
</tu-tag>
</tu-color-picker>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BrushFilled } from '@tu-view-plus/icons-vue';
const value = ref('#49629A');
</script><template>
<tu-color-picker v-model="value">
<tu-tag effect="dark" :color="value">
<template #icon><BrushFilled /></template>
{{ value }}
</tu-tag>
</tu-color-picker>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BrushFilled } from '@tu-view-plus/icons-vue';
const value = ref('#49629A');
</script>尺寸
tu-color-picker 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
#49629A
#49629A
#49629A
#49629A
<template>
<tu-row class="mb-2">
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" size="mini" />
</tu-col>
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" size="small" />
</tu-col>
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" />
</tu-col>
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" size="large" />
</tu-col>
</tu-row>
<tu-row>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" size="mini" />
</tu-col>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" size="small" />
</tu-col>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" />
</tu-col>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" size="large" />
</tu-col>
</tu-row>
</template><template>
<tu-row class="mb-2">
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" size="mini" />
</tu-col>
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" size="small" />
</tu-col>
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" />
</tu-col>
<tu-col :span="6">
<tu-color-picker defaultValue="#49629A" size="large" />
</tu-col>
</tu-row>
<tu-row>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" size="mini" />
</tu-col>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" size="small" />
</tu-col>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" />
</tu-col>
<tu-col :span="6">
<tu-color-picker showText defaultValue="#49629A" size="large" />
</tu-col>
</tu-row>
</template>只使用面板
只用颜色选择面板。
Hex
#
系统预设颜色
Hex
#
系统预设颜色
<template>
<tu-space :size="32">
<tu-color-picker defaultValue="#49629A" hideTrigger showPreset />
<tu-color-picker defaultValue="#49629A" hideTrigger showPreset disabled />
</tu-space>
</template><template>
<tu-space :size="32">
<tu-color-picker defaultValue="#49629A" hideTrigger showPreset />
<tu-color-picker defaultValue="#49629A" hideTrigger showPreset disabled />
</tu-space>
</template>ColorPicker API
ColorPicker Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value | 绑定值 | String | - |
| default-value | 默认值（非受控状态） | String | - |
| format | 颜色值的格式 | String | - |
| size | 尺寸 | String | medium |
| show-text | 显示颜色值 | Boolean | false |
| show-history | 显示历史颜色 | Boolean | false |
| show-preset | 显示预设颜色 | Boolean | false |
| disabled | 禁用 | Boolean | false |
| disabled-alpha | 禁用透明通道 | Boolean | false |
| hide-trigger | 没有触发元素，只显示颜色面板 | Boolean | false |
| trigger-props | 接受所有 Trigger 组件的Props | Object | - |
| history-colors | 历史颜色的颜色数组 | Array | - |
| preset-colors | 预设颜色的颜色数组 | Array | colors |
ColorPicker Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 颜色值改变时触发 | Function |
| popup-visible-change | 颜色面板展开和收起时触发 | Function |