Package Exports

vue3-color-gradient-picker
vue3-color-gradient-picker/dist/index.js.mjs

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 (vue3-color-gradient-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-color-gradient-picker

This template should help get you started developing with Vue 3 in Vite.

Color and gradient picker for vue3.js. If you use vue2， plese use color-gradient-picker.vue3-color-gradient-picker is an upgraded version of color-gradient-picker

本项目仅仅是将Vue2相关api修改成Vue3 如果想彻底的使用Vue3，请使用Qiu-Jun大佬的项目哈~ .vue3-color-gradient-picker is an upgraded version of color-gradient-picker

Alt text

Usage

yarn add vue3-color-gradient-picker
# or npm install vue3-color-gradient-picker or pnpm install vue3-color-gradient-picker

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Examples

Here is a simple examples of vue3-color-gradient-picker being used in an app:

Color Picker

<template>
  <div id="app">
    <ColorPicker
      :color="color"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />
  </div>
</template>

<script>
import { ColorPicker } from 'vue3-color-gradient-picker';

export default {
  name: 'App',

  components: {
    ColorPicker
  },

  data()  {
    return {
      color: {
        red: 255,
        green: 0,
        blue: 0,
        alpha: 1
      }
    }
  },   

  methods: {
    onChange(attrs, name) {
      this.color = { ...attrs };
    }
  }
}
</script>

<style src="vue3-color-gradient-picker/dist/index.css" lang="css" />

Gradient Color Picker

<template>
  <div id="app">
    <ColorPicker
      :gradient="gradient"
      :isGradient="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />
  </div>
</template>

<script>
import { ColorPicker } from 'vue3-color-gradient-picker';

export default {
  name: 'App',

  components: {
    ColorPicker
  },

  data()  {
    return {
      gradient: {
        type: 'linear',
        degree: 0,
        points: [
          {
            left: 0,
            red: 0,
            green: 0,
            blue: 0,
            alpha: 1
          },
          {
            left: 100,
            red: 255,
            green: 0,
            blue: 0,
            alpha: 1
          }
        ]      
      }
    }
  },   

  methods: {
    onChange(attrs, name) {
      console.log(name);
    }
  }
}
</script>

<style src="vue3-color-gradient-picker/dist/index.css" lang="css" />

Lint with ESLint

npm run lint