Package Exports

vue2-color-picker-gradient
vue2-color-picker-gradient/dist/vue2-color-picker-gradient.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-color-picker-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue2-color-picker-gradient

Color Pickers for ColorPickerGradient, Chrome & more with Vue.js(vue2.x).
欢迎点个star🎉🎉🎉

1657866263017

Live demo

Installation

NPM

$ npm install vue2-color-picker-gradient

ES6

import Vue from 'vue'
import ColorPickerGradient from 'vue2-color-picker-gradient'
Vue.use(ColorPickerGradient)


import ColorPicker from 'vue2-color-picker-gradient'
export default {
  name: 'App',
  components: {
    ColorPicker,
  },
}

Props

Props of ColorPicker

Name	Type	Default	Description
type	string	linear or gradient	Color selector type
disabledColorDeg	boolean	false	Disable angle
pDeg	number	90	Default angle
pColor	object	{hex: '#000000',rgba: { r: 0, g: 0, b: 0, a: 1 },color: 'rgba(0,0,0,1)'}	Default color
pColors	Array	[{...pColor,pst:0},{...pColor,pst:100}]	Gradient Default color Array
showClose	boolean	true	true or false
closeOnClickBody	boolean	false	click on body close picker
titleConfig	object	{text:"颜色选择器",show: true}

Events

Name	Params	Description
@changeColor	{ style, colors, deg, color }	color chang callback
@onClose		picker hide callback

example

<template>
  <div id="app">
    <div class="select" @click="showPicker">选择器</div>
    <div class="color_poick">
      <ColorPicker
        v-model="isShowColorPicker"
        type="linear"
        @changeColor="changeColor"
        @onClose="onClosePicker"
        :pDeg="90"
        :pColor="pColor"
        :pColors="pColors"
        :showClose="true"
        :closeOnClickBody="false"
      />
      <ColorPicker
        v-model="isShowColorPicker1"
        type="gradient"
        @changeColor="changeColor1"
        @onClose="onClosePicker1"
        :pDeg="90"
        :pColor="pColor"
        :pColors="pColors"
        :showClose="true"
        :closeOnClickBody="false"
      />
    </div>
    <div style="display: flex;">
      <div class="box_xxx" :style="style"></div>
      <div class="box_xxx box1" :style="style1"></div>
    </div>
  </div>
</template>

<script>
import ColorPicker from './components/vue2-color-picker.vue'

export default {
  name: 'App',
  components: {
    ColorPicker,
  },
  data() {
    return {
      isShowColorPicker: true,
      isShowColorPicker1: true,
      style: '',
      style1: '',
      titleConfig: {
        show: true,//控制顶部文字 关闭按钮 显隐
        text:'颜色选择器'//顶部文字
      },
      pDeg: 60,
      pColor: {
        hex: '#194d33',
        hex8: '#194d33',
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1,
        color: 'rgba(0,0,0,1)',
      },
      pColors: [
        {
          color: 'rgba(255, 255, 255, 1)',
          hex: '#ffffff',
          rgba: { r: 255, g: 255, b: 255, a: 1 },
          pst: 100,
        },
        {
          color: 'rgba(0, 0, 0, 1)',
          hex: '#000000',
          rgba: { r: 0, g: 0, b: 0, a: 1 },
          pst: 0,
        },
      ],
    }
  },
  methods: {
    changeColor({ style, colors, deg, color }) {
      console.log(style, colors, deg, color)
      this.style = `background: ${color.color}`
    },
    showPicker() {
      this.isShowColorPicker = true
      this.isShowColorPicker1 = true
    },
    onClosePicker() {},
    changeColor1({ style, colors, deg, color }) {
      console.log(style, colors, deg, color)
      this.style1 = `background: ${style}`
    },
    showPicker1() {
      this.isShowColorPicker1 = true
    },
    onClosePicker1() {},
  },
  watch: {},
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.select {
  height: 30px;
  width: 50px;
}
.color_poick {
  display: flex;
  justify-content: space-between;
  width: 590px;
}
.box_xxx {
  width: 300px;
  height: 300px;
}
.box1{
  margin-left: 50px;
}
</style>

Local setup

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for lib

yarn lib

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.