colorpicker

A very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.

Note: This document is for Vue3ColorPicker v2. If you are looking for an older versions, refer to the v1 branches.The v2 version is a destructive update, and some functions in v1 are no longer supported. Please use it with caution

Live Demo

中文文档

Installation

yarn add vue3-colorpicker

OR

npm install vue3-colorpicker

How to use

The first step is global registration

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

createApp(App)
  .use(router)
  .use(Vue3ColorPicker)
  .mount("#app");

OR

1import { ColorPicker } from "vue3-colorpicker";
2import "vue3-colorpicker/style.css";
3
4export default defineComponent({
5components: { ColorPicker },
6});

Usage

1<template>
2  <div>
3     <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/>
4  </div>
5</template>
6<script lang="ts">
7  import { ref } from "vue";
8  import { ColorInputWithoutInstance } from "tinycolor2";
9
10  export default defineComponent({
11     setup() {
12       const pureColor = ref<ColorInputWithoutInstance>("red");
13       const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");
14
15       return { pureColor, gradientColor }
16     }
17  });
18</script>
19

Live Demo