vue-color-table

a colorpicker component for Vue.js.

DEMO

Requirements

• Vue.js ^2.6.11
• element-ui ^2.15.1

Instllation

npm

$ npm install vue-color-table

Usage

<template>
    <VueColorTable v-model="colors" :minMax="range"></VueColorTable>
</template>

<script>
  import VueColorTable from 'vue-color-table'

  export default {
    name: 'App',
    components: {
      VueColorTable
    },
    data() {
      return {
        range: [-500, 500],
        colors: {}
      }
    }
  }
</script>

Config

COLOR_TABLE_CONFIG = {
    'rainbow': [[0.0, 'rgba(0, 0, 255, 1.0)'], [0.2, 'rgba(0, 255, 255, 1.0)'], [0.5, 'rgba(0, 255, 0, 0.5)'], [0.8, 'rgba(255, 255, 0, 1.0)'], [1.0, 'rgba(255, 0, 0, 1.0)']],
    'cooltowarm': [[0.0, '#3C4EC2'], [0.2, '#9BBCFF'], [0.5, '#DCDCDC'], [0.8, '#F6A385'], [1.0, '#B40426']],
    'blackbody': [[0.0, '#000000'], [0.2, '#780000'], [0.5, '#E63200'], [0.8, '#FFFF00'], [1.0, '#FFFFFF']],
    'grayscale': [[0.0, '#000000'], [0.2, '#404040'], [0.5, '#7F7F80'], [0.8, '#BFBFBF'], [1.0, '#FFFFFF']],
    'rainbow2': [[0.0, '#000000'], [0.2, '#404040'], [0.5, '#7F7F80'], [1, '#BFBFBF']]
}

Props

Props	Type	Default	Description
v-model	Object	{ name: 'rainbow', colors: COLOR_TABLE_CONFIG['rainbow'] }	the name of the color scheme and the color array of the color scheme
minMax	Array	[0, 1]	numerical range of visual mapping for color schemes

License

The MIT License