A beautiful color picker component for Vue. With support for gradient, multi-color formats, preset colors, and much more.
How to use it:
1. Import and register the color picker.
import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
createApp(App)
.use(router)
.use(Vue3ColorPicker)
.mount("#app");
// OR
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
export default defineComponent({
components: { ColorPicker },
});
2. Add the color picker component to the template.
<template>
<div>
<color-picker />
</div>
</template>
3. Available props.
isWidget: propTypes.bool.def(false),
pickerType: propTypes.oneOf(["fk", "chrome"]).def("fk"),
shape: propTypes.oneOf(["circle", "square"]).def("square"),
pureColor: {
type: [String, Object] as PropType<ColorInputWithoutInstance>,
default: "#000000",
},
gradientColor: propTypes.string.def(
"linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"
),
format: {
type: String as PropType<ColorFormat>,
default: "rgb",
},
disableAlpha: propTypes.bool.def(false),
disableHistory: propTypes.bool.def(false),
roundHistory: propTypes.bool.def(false),
useType: propTypes.oneOf(["pure", "gradient", "both"]).def("pure"),
activeKey: propTypes.oneOf(["pure", "gradient"]).def("pure"),
lang: {
type: String as PropType<SupportLang>,
default: "ZH-cn",
},
zIndex: propTypes.number.def(9999),
pickerContainer: {
type: String || HTMLElement,
default: "body",
},
debounce: propTypes.number.def(100),
Preview:
Changelog:
v2.2.3 (11/22/2023)
- fixed some bug
- update: gradient buttons style
v2.2.0 (08/05/2023)
- fixed some bug
v2.1.6 (07/16/2023)
- fixed some bug
v2.1.5 (06/15/2023)
- Fix some bugs
v2.1.4 (06/06/2023)
- Fix some bugs
v2.1.3 (05/30/2023)
- Fix some bugs
- new props: pickerContainer , debounce
v2.1.2 (01/05/2023)
- bugfix
Download Details:
Author: aesoper101
Live Demo: https://aesoper101.github.io/vue3-colorpicker/?path=/story/example-colorpicker--square
Download Link: https://github.com/aesoper101/vue3-colorpicker/archive/refs/heads/main.zip
Official Website: https://github.com/aesoper101/vue3-colorpicker
Install & Download:
