0.0.9 • Published 6 months ago
mx-color-picker v0.0.9
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 |