ColorPicker
一个用于选择颜色的组件。
用法
使用 v-model 指令来控制 ColorPicker 的值。
<script setup lang="ts">
const value = ref('#00C16A')
</script>
<template>
<UColorPicker v-model="value" />
</template>
当您不需要控制其状态时，使用 default-value 属性来设置初始值。
<template>
<UColorPicker default-value="#00BCD4" />
</template>
RGB 格式
使用 format 属性来设置 ColorPicker 的 rgb 值。
<script setup lang="ts">
const value = ref('rgb(0, 193, 106)')
</script>
<template>
<UColorPicker format="rgb" v-model="value" />
</template>
HSL 格式
使用 format 属性来设置 ColorPicker 的 hsl 值。
<script setup lang="ts">
const value = ref('hsl(153, 100%, 37.8%)')
</script>
<template>
<UColorPicker format="hsl" v-model="value" />
</template>
CMYK 格式
使用 format 属性来设置 ColorPicker 的 cmyk 值。
<script setup lang="ts">
const value = ref('cmyk(100%, 0%, 45.08%, 24.31%)')
</script>
<template>
<UColorPicker format="cmyk" v-model="value" />
</template>
CIELab 格式
使用 format 属性来设置 ColorPicker 的 lab 值。
<script setup lang="ts">
const value = ref('lab(68.88% -60.41% 32.55%)')
</script>
<template>
<UColorPicker format="lab" v-model="value" />
</template>
节流
使用 throttle 属性来设置 ColorPicker 的节流值。
<script setup lang="ts">
const value = ref('#00C16A')
</script>
<template>
<UColorPicker :throttle="100" v-model="value" />
</template>
尺寸
使用 size 属性来设置 ColorPicker 的尺寸。
<template>
<UColorPicker size="xl" />
</template>
禁用
使用 disabled 属性来禁用 ColorPicker。
<template>
<UColorPicker disabled />
</template>
示例
作为颜色选择器
使用 Button 和 Popover 组件来创建一个颜色选择器。
<script setup lang="ts">
const color = ref('#00C16A')
const chip = computed(() => ({ backgroundColor: color.value }))
</script>
<template>
<UPopover>
<UButton label="Choose color" color="neutral" variant="outline">
<template #leading>
<span :style="chip" class="size-3 rounded-full" />
</template>
</UButton>
<template #content>
<UColorPicker v-model="color" class="p-2" />
</template>
</UPopover>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
throttle |
|
颜色选择器的节流时间，单位为毫秒 |
disabled |
禁用颜色选择器 | |
defaultValue |
|
颜色选择器的默认值 |
format |
|
颜色的格式 |
size |
|
|
modelValue |
| |
ui |
|
Emits
| 事件 | 类型 |
|---|---|
update:modelValue |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
colorPicker: {
slots: {
root: 'data-[disabled]:opacity-75',
picker: 'flex gap-4',
selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {
size: {
xs: {
selector: 'w-38 h-38',
track: 'h-38'
},
sm: {
selector: 'w-40 h-40',
track: 'h-40'
},
md: {
selector: 'w-42 h-42',
track: 'h-42'
},
lg: {
selector: 'w-44 h-44',
track: 'h-44'
},
xl: {
selector: 'w-46 h-46',
track: 'h-46'
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
colorPicker: {
slots: {
root: 'data-[disabled]:opacity-75',
picker: 'flex gap-4',
selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {
size: {
xs: {
selector: 'w-38 h-38',
track: 'h-38'
},
sm: {
selector: 'w-40 h-40',
track: 'h-40'
},
md: {
selector: 'w-42 h-42',
track: 'h-42'
},
lg: {
selector: 'w-44 h-44',
track: 'h-44'
},
xl: {
selector: 'w-46 h-46',
track: 'h-46'
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
colorPicker: {
slots: {
root: 'data-[disabled]:opacity-75',
picker: 'flex gap-4',
selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {
size: {
xs: {
selector: 'w-38 h-38',
track: 'h-38'
},
sm: {
selector: 'w-40 h-40',
track: 'h-40'
},
md: {
selector: 'w-42 h-42',
track: 'h-42'
},
lg: {
selector: 'w-44 h-44',
track: 'h-44'
},
xl: {
selector: 'w-46 h-46',
track: 'h-46'
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
})
]
})