簡介

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 }

總結

Vue-color 是一個功能強大且易于使用的顏色選擇器庫，提供了多種風格的選擇器組件。通過本文檔的介紹，您可以快速上手并在項目中使用這些組件。無論是簡單的顏色選擇還是復雜的顏色管理需求，Vue-color 都能滿足您的要求。

?Vue-color：Vue.js 專業顏色選擇器組件庫 - 支持Vue2/3，TypeScript，暗色主題 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享