DEMO: Vue-color-picker portal

Github: Project portal

The characteristics of

  1. Simple to use, the UI is optimized on the basis of the original plug-in to add rounded corners and transition animation
  2. Provides global components installed as plug-ins
  3. Provide separate introduction as a component on demand
  4. The “more color” feature is implemented in html5 input[type=’color’] browsers

To obtain

You can download the entire project and use the/SRC /plugin/vue-color-picker directory.

You can also just download the plug-in

usage

Install as a plug-in

Import colorPicker from './plugin/vue-color-picker' // Register the plugin vue. use(colorPicker) // use it directly in the component's temelate <colorPicker v-model="color"></colorPicker>Copy the code

Install as a component

Import colorPicker from './plugin/vue-color-picker/colorPicker' export default {components: import colorPicker from './plugin/vue-color-picker/colorPicker' {colorPicker}} // Use <colorPicker v-model="color"></colorPicker>Copy the code

options

You can configure color-picker by setting the following properties on the element

  1. DefaultColor: the defaultColor, such as defaultColor=”#ff0000″
  2. Disabled: Indicates the disabled state, for example, disabled=true

The event

Change Triggered when the color value changes

<colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
Copy the code

instructions

Angular
color-picker