当前位置：首页 > news >正文

Vue-color：Vue.js 专业颜色选择器组件库 – 支持Vue2/3，TypeScript，暗色主题

news 2025/9/16 8:31:07

简介

Vue-color 是一个专为 Vue.js 设计的颜色选择器组件库，提供了多种风格的颜色选择器组件。它支持 Vue 2.7 和 Vue 3，具有 TypeScript 支持、SSR 兼容性和暗色主题支持。

特性

多种颜色选择器 – 提供 Chrome、Sketch、Photoshop 等多种风格
Vue 2.7/3 兼容 – 同时支持 Vue 2.7 和 Vue 3
模块化设计 – 按需导入，支持 Tree Shaking
TypeScript 支持 – 完整的类型定义
暗色主题 – 内置暗色模式支持
SSR 友好 – 兼容 Nuxt 等 SSR 框架

安装

# 使用 npm
npm install vue-color# 使用 yarn
yarn add vue-color# 使用 pnpm
pnpm add vue-color

快速开始

1. 导入样式

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "vue-color/style.css";createApp(App).mount("#app");

2. 基本使用

<template><div class="color-picker-demo"><h3>选择的颜色: {{ color }}</h3><ChromePicker v-model="color" /></div>
</template><script setup lang="ts">
import { ChromePicker } from "vue-color";const color = defineModel({default: "#68CCCA",
});
</script>

组件介绍

ChromePicker

Chrome 风格的颜色选择器，功能最全面。

<template><ChromePickerv-model="color":disable-alpha="false":disable-fields="false"/>
</template><script setup lang="ts">
import { ChromePicker } from "vue-color";const color = defineModel({default: "#ff6b6b",
});
</script>

SketchPicker

Sketch 风格的颜色选择器，适合设计师使用。

<template><SketchPickerv-model="color":preset-colors="presetColors":disable-alpha="false"/>
</template><script setup lang="ts">
import { SketchPicker } from "vue-color";const color = defineModel({default: "#4ecdc4",
});const presetColors = ["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986",
];
</script>

CompactPicker

紧凑型颜色选择器，占用空间小。

<template><CompactPicker v-model="color" :colors="customColors" />
</template><script setup lang="ts">
import { CompactPicker } from "vue-color";const color = defineModel({default: "#ff9ff3",
});const customColors = ["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4caf50",
];
</script>

SwatchesPicker

色板选择器，提供预设的颜色组合。

<template><SwatchesPicker v-model="color" :height="200" />
</template><script setup lang="ts">
import { SwatchesPicker } from "vue-color";const color = defineModel({default: "#ff5722",
});
</script>

TwitterPicker

Twitter 风格的颜色选择器。

<template><TwitterPicker v-model="color" />
</template><script setup lang="ts">
import { TwitterPicker } from "vue-color";const color = defineModel({default: "#ff5722",
});
</script>

高级用法

暗色主题

<template><div :class="{ dark: isDark }"><button @click="toggleTheme">切换主题</button><ChromePicker v-model="color" /></div>
</template><script setup lang="ts">
import { ChromePicker } from "vue-color";
import { ref } from "vue";const color = defineModel({default: "#68CCCA",
});const isDark = ref(false);const toggleTheme = () => {isDark.value = !isDark.value;document.documentElement.classList.toggle("dark", isDark.value);
};
</script>

SSR 兼容

<template><ClientOnly><ChromePicker /></ClientOnly>
</template><script setup lang="ts">
import { ClientOnly } from "#components";
import { ChromePicker } from "vue-color";
</script>

Vue 2.7 使用

<template><ChromePicker v-model="color" />
</template><script setup>
import { ref } from "vue";
import { ChromePicker } from "vue-color/vue2";const color = ref("#5c8f94");
</script>

API 参考

通用 Props

属性	类型	默认值	描述
`v-model`	`string \| object`	–	颜色值，支持多种格式
`v-model:tinyColor`	`tinycolor`	–	tinycolor 实例
`disableAlpha`	`boolean`	`false`	是否禁用透明度
`disableFields`	`boolean`	`false`	是否禁用输入框

颜色格式支持

Vue-color 支持多种颜色格式：

// 十六进制
'#ff6b6b'
'#ff6b6bff'// RGB
'rgb(255, 107, 107)'
'rgba(255, 107, 107, 0.8)'// HSL
'hsl(0, 100%, 70%)'
'hsla(0, 100%, 70%, 0.8)'// 对象格式
{ r: 255, g: 107, b: 107, a: 1 }