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

简介

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>
  <ChromePicker
    v-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>
  <SketchPicker
    v-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 }

总结

Vue-color 是一个功能强大且易于使用的颜色选择器库，提供了多种风格的选择器组件。通过本文档的介绍，您可以快速上手并在项目中使用这些组件。无论是简单的颜色选择还是复杂的颜色管理需求，Vue-color 都能满足您的要求。