a Vue3.x based colorpicker component.

Guides & Examples | 文档和示例

Features

• Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient.
• Supports color opacity(alpha) adjustment.
• Supports gradient bar control, easily drag/add/delete the control points.
• The EyeDropper can quickly pick any color from your screen. （supports Google Chrome version 95+）
• Supports live preview.

Screenshots

Installation

npm i @mcistudio/vue-colorpicker

How to Use

Global Registration

main.js

import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/style.css'
createApp(App)
  .use(ColorPicker)
  .mount("#app");

OR

Local Registration

HelloWorld.vue

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'

<template>
  <ColorPicker></ColorPicker>
</template>

</script>