vue3-color-gradient-picker
v1.0.2
Published
Color and gradient picker for vue3.js
Downloads
38
Maintainers
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
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