colorpickers-a v1.0.5

vue3-colorpicker-slider

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

Live Demo

中文文档

Installation

yarn add colorpickers-a

OR

npm install colorpickers-a

How to use

The first step is global registration

import colorpickers-a from "colorpickers-a";
import "colorpickers-a/dist/style.css";

createApp(App)
  .use(router)
  .use(colorpickers-a)
  .mount("#app");

OR

import { colorpicker-a } from "colorpickers-a";
import "colorpickers-a/dist/style.css";

export default defineComponent({
components: { colorpicker-a },
});

Usage

<template>
  <div>
     <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor" v-model="gradientData"/>
  </div>
</template>
<script lang="ts">
  import { ref } from "vue";
  import { ColorInputWithoutInstance } from "tinycolor2";

  export default defineComponent({
     setup() {
       const pureColor = ref<ColorInputWithoutInstance>("red");
       const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");
       const gradientData = ref({});

       return { pureColor, gradientColor,gradientData }
     }
  });
</script>

Live Demo