chnkarl / slim-color-picker

a color picker component for Vue3

slim-color-picker

a color picker component for Vue3

Install

npm i slim-color-picker

yarn add slim-color-picker

Usage

<template>

  <SlimColorPicker 
    :width="30"
    :height="30"
    theme="light"
    initFormat="hex"
    okText="ok"
    :radius="4"
    :presets="presets"
    v-model="color"
    @change="onChange" 
  />

</template>

<script lang="ts">

import { defineComponent, ref, reactive } from 'vue';

import SlimColorPicker from 'slim-color-picker'
import 'slim_color_picker/dist/style.css'

export default defineComponent({
  components: { SlimColorPicker },
  setup(props, { attrs, slots, emit, expose }) {

    let color = ref<string>('0066ff)');

    const presets = reactive([
      '#ff4500',
      '#ff8c00',
      '#ffd700',
      '#90ee90',
      '#00ced1',
      '#1e90ff',
      '#c71585',
      'rgba(255, 69, 0, 0.68)',
      'rgb(255, 120, 0)',
      'hsl(181, 100%, 37%)',
      'hsla(209, 100%, 56%, 0.73)'
    ])

    watch(color, (newValue) => {
      console.log('color: ', newValue);
    });

    const onChange = (value) => {
      console.log('value: ', value);
    };

    return {
      color,
      changeColor,
      presets
    };
  },
});
</script>

Property

Property	Require	Type	Default	Description
v-model	true	string	-	confirmed color value
width	false	number	30	trigger handler width
height	false	number	39	trigger handler height
theme	false	string	light	light
initFormat	false	string	hex	hex
okText	false	string	OK	confirm btn text
radius	false	number	0	trigger handler border-radius
presets	false	array	[]	preset colors for choose

Event

Property	Description	Arguments
change	callback when click color panel & bar	function(e)

Thanks

Thank you tinycolor2 for the color format conversion component that makes our development more efficient.