v-easy-components

# ColorPicker 0.8.1+

This component is similar to Element, except that some modifications have been made to it, and Element.

# Comparison with Element component

# Advantage

  • Can be combined with v-tip command to use in any component or custom DOM structure.
  • Support simple property, no need to click to trigger, render directly in the view.

# Disadvantage

  • Only the author maintains it, and the corresponding bug modification is not timely. Of course, you can also Pull
  • No corresponding design resources

# Basic usage

Use v-model to bind the value of the color. The bound value needs to be a string type. Modifying this variable externally will also affect the color of the selector
<template>
  <ve-color-picker v-model="value"></ve-color-picker>
  <ve-color-picker v-model="value1"></ve-color-picker>
</template>

<script>
  export default {
    data() {
      return {
        value: '#166AE0',
        value1: ''
      }
    },
  }
</script>

# Use of simple

The change event is emitted after clicking the OK button
<template>
  <div style="width: 100px;height: 100px;" :style="{background: value}"></div>
  <ve-color-picker v-model="value" simple @change="handleChange"></ve-color-picker>
</template>

<script>
  export default {
    data() {
      return {
        value: '#166AE0',
      }
    },
    methods: {
      handleChange() {},
    }
  }
</script>

# Combined with v-tip

Here is just how to use ColorPicker inv-tip. The VNode property ofv-tip has more usefulness, because what it needs is a VNode.

<template>
  <div style="width: 100px;height: 100px;" 
       :style="{background: value3}" 
       v-tip.right="{VNode: renderColorPicker, effect: 'light', target: 'click'}"></div>
</template>

<script>
  import { ColorPicker } from 'v-easy-components';

  export default {
    data() {
      return {
        value: 'hsl(50, 84%, 64%)',
      }
    },
    methods: {
      clickHandler(value) {
        this.value = value;
      },
      renderColorPicker() {
        const h = this.$createElement;
        return h(ColorPicker, {
          props: {
            value: this.value,
            simple: true,
            'color-format': 'hsl'
          },
          on: {
            input: this.clickHandler,
          },
        })
      }
    }
  }
</script>

# ColorPicker Attributes

Parameter Description Type Optional value Defaults
simple Whether it is pop-up style boolean true / false false
size Set the size of the color trigger number - 34
width Color picker theme section width number - 300
height The height of the color picker theme number - 150
color-format Format of bound colors string hsl / hsv / hex / rgb hex

# ColorPicker Event

Event name Event Description Callback parameter
change Triggered when the binding value changes The current value

← ScrollBar →