• English
• Chinese Simplified / 中文

Welcome to the Vue Color Picker

This repository is a fork of the awesome Vue Color Gradient Picker.

This color picker takes the same features as the previous picker, but with an updated user experience.

Table of contents

• Installing and running
• Preset colors

Installing and running

To install from the command line:

npm install vue-color-picker@https://github.com/diningcity-group/vue-color-picker.git#0.1.1

To add & use the component:

<template>
  <ColorPicker :color="color" :onEndChange="onChange" />
</template>
<script>
import { ColorPicker } from "vue-color-picker";

export default {
  components: {
    ColorPicker,
  },
  data() {
    return {
      color: {}
    }
  },
  methods: {
    onChange(color) {
      this.color = color;
    }
  }
}
</script>

Preset colors

You can pass a pre-set color value using the "color" property.

"color" is a json object, and needs to follow the format below:

{
  red: 255,
  green: 0,
  blue: 0,
  alpha: 1,
}

Gradient values can also be preset, by following the same format as the output generated by the component itself:

{
  points: [
    { left: 0, red: 186, green: 68, blue: 68, alpha: 1 },
    { left: 100, red: 255, green: 0, blue: 0, alpha: 1 },
    { left: 42, red: 186, green: 68, blue: 68, alpha: 1 },
  ],
  type: "linear",
  degree: 0,
}

欢迎使用 Vue Color Picker

这个仓库是很棒的 Vue Color Gradient Picker 的分支。

此颜色选择器具有与@arthay的选择器相同的功能，但具有更新的用户体验。

目录

• 安装和运行
• 预设颜色值

安装和运行

从命令行安装

npm install vue-color-picker@https://github.com/diningcity-group/vue-color-picker.git#0.1.1

在组件中引入

<template>
  <ColorPicker :color="color" :onEndChange="onChange" />
</template>
<script>
import { ColorPicker } from "vue-color-picker";

export default {
  components: {
    ColorPicker,
  },
  data() {
    return {
      color: {}
    }
  },
  methods: {
    onChange(color) {
      this.color = color;
    }
  }
}
</script>

预设颜色值

可以通过 color 属性传入预设的演示值， color 是一个json格式的对象，如果是单色值，需要符合以下格式:

{
  red: 255,
  green: 0,
  blue: 0,
  alpha: 1,
}

如果是渐变色值，需要符合以下格式，这个格式是组件自动生成的:

{
  points: [
    { left: 0, red: 186, green: 68, blue: 68, alpha: 1 },
    { left: 100, red: 255, green: 0, blue: 0, alpha: 1 },
    { left: 42, red: 186, green: 68, blue: 68, alpha: 1 },
  ],
  type: "linear",
  degree: 0,
}