colorpicker

A very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.

一个非常漂亮的颜色选择器，支持多种颜色格式的输入和输出，并支持渐变色选择。

Installation

npm install mx-color-picker

How to use

The first step is global registration

import MxColorPicker from "mx-color-picker";
import "mx-color-picker/style.css";

createApp(App)
  .use(router)
  .use(MxColorPicker)
  .mount("#app");

OR

import { ColorPicker } from "mx-color-picker";
import "mx-color-picker/style.css";

export default defineComponent({
components: { ColorPicker },
});

Usage

<template>
  <div>
     <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/>
  </div>
</template>
<script lang="ts">
  import { ref } from "vue";

  export default defineComponent({
     setup() {
       const pureColor = ref("red");
       const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");

       return { pureColor, gradientColor }
     }
  });
</script>

参数配置

| 参数值 | 描述 | 选项 | 默认值 | | --- | --- | --- | --- | | isWidget | 是否为弹出层组件？ | true / false | false | | shape | 形状 | circle / square| square | | pureColor | 纯色默认值 | - | - | | gradientColor | 渐变色默认值 | - | - | | pickerType | 色块/渐变区域 | fk / chrome | fk | | useType | 纯色/渐变/全部 | pure / gradient / both | pure | | disableHistory | 禁用历史色值 | true / false | false | | roundHistory | 历史色值形状圆形 | true / false | false | | disableAlpha | 禁用透明度选项 | true / false | false | | zIndex | 层级 | 数值类型 | - | | lang | 语言 | ZH-cn / En | ZH-cn | | pickerContainer | 挂载元素 | 元素名称 | body | | debounce | 防抖时间 | 数值类型 | - | | theme | 主题 | white / black | white |