In Oinone Kunlun, some components are implemented based on the third-party component library "Element Plus". These components can be used not only for Widget components, but also directly for any Vue component using Vue native writing. This article will provide a detailed introduction to the usage and API definitions of these components.

Ⅰ. Import

import { OioColorPicker } from '@oinone/kunlun-vue-ui-el';

Ⅱ. Reference List

(Ⅰ) Data Display

ColorPicker

Basic Usage

<template>
  <oio-color-picker v-model:value="value" />
</template>

Color Picker with Input Box

<template>
  <oio-color-picker v-model:value="value" has-input />
  <oio-color-picker v-model:value="value" has-input input-placement="prepend" />
</template>

Only Apply Oinone Theme Style

<template>
  <!-- Basic usage -->
  <div class="oio-color-picker">
    <el-color-picker popper-class="oio-color-picker-popper" v-model="value" />
  </div>
  <!-- Color picker with input box -->
  <div class="oio-color-picker">
    <el-input v-model="value" readonly>
      <template #append>
        <div class="oio-color-picker-inner">
          <el-color-picker popper-class="oio-color-picker-popper" v-model="value" />
        </div>
      </template>
    </el-input>
  </div>
</template>

For more usage methods, please refer to: Element Plus ColorPicker Color Picker For Vue

API

Props

Parameter Name	Type	Default Value	Description
value	string	-	Bound color value (two-way binding)
defaultValue	string	-	Initial color value
readonly	boolean	false	Whether it is in read-only mode (prohibits color selection)
disabled	boolean	false	Whether to disable the component
colorFormat	ColorFormat	ColorFormat.RGB	Color format (enum value or string, such as 'hex', 'hsl')
predefine	string[]	DEFAULT_PREDEFINE	Preset color list (supports RGB/HEX formats, automatically deduplicates and handles transparency)
showAlpha	boolean	true	Whether to display the alpha adjustment slider
hasInput	boolean	false	Whether to display the input box
inputPlacement	ColorInputPlacement	ColorInputPlacement.BEFORE	Input box position (enum value, controls before or after the color picker)
inputPlaceholder	string	'Please select a color'	Input box placeholder text
inputReadonly	boolean	true	Whether the input box is read-only (takes effect when hasInput: true)
disabledLastedColor	boolean	false	Whether to disable the recently used colors function
lastedColorCount	number	4	Number of recently used colors

Events

Event Name	Parameter Type	Description
update:value	string	Triggered when the color value changes (two-way binding)
change	string	Triggered when color selection is completed