默认样式

使用

scss

@import '@vrx/color-picker-kit-style/scss/index.scss';

css

@import '@vrx/color-picker-kit-style/css/index.css';

单独引入特定组件样式

scss

@import '@vrx/color-picker-kit-style/scss/[组件名称]/style/index.scss';

css

@import '@vrx/color-picker-kit-style/css/[组件名称]/style/index.css';

示例

通过默认样式简易实现一个类 Arco Design 的 颜色选择器面板

index.vue

<script setup lang="ts">
  import { computed, ref, watch } from 'vue'
  import {
    ColorFormats,
    HSVA,
    HSVColorAlphaSlider,
    HSVColorBlock,
    HSVColorGradientSlider,
    HSVColorPalette,
    tinyColor,
  } from '@vrx/color-picker-kit'

  const props = withDefaults(
    defineProps<{
      /**
       * 结果值格式化
       */
      format?: ColorFormats
      /**
       * 默认值
       */
      defaultValue?: string
      /**
       * 是否禁用
       */
      disabled?: boolean
    }>(),
    {
      format: 'hex',
      defaultValue: '#43E97B',
      disabled: false,
    }
  )

  /**
   * 双向绑定的值
   */
  const modelValue = defineModel<string>()

  const controlValue = computed(() => modelValue.value ?? props.defaultValue)

  const hsvValue = computed(() => {
    const v = tinyColor(controlValue.value, {
      format: props.format,
    }).toHsv()
    return {
      ...v,
      s: v.s * 100,
      v: v.v * 100,
    }
  })

  /**
   * 由于 hex 转 hsv 会丢失部分信息，导致拖拽时，色盘闪烁
   * 这边实现的不是完全的 双向绑定
   */
  const color = ref<HSVA>({
    h: hsvValue.value.h,
    s: hsvValue.value.s,
    v: hsvValue.value.v,
    a: hsvValue.value.a,
  })

  const handleChange = (e: HSVA) => {
    color.value = e
  }

  const formatValue = computed(() => {
    return tinyColor(color.value).toString(props.format)
  })

  watch(formatValue, (v) => {
    modelValue.value = v
  })
</script>
<template>
  <div class="vrx-color-picker">
    <HSVColorPalette class="vrx-color-picker-palette" :color :disabled @change="handleChange" />
    <div class="vrx-color-picker-control-wrapper">
      <div class="vrx-color-picker-slider-group">
        <HSVColorGradientSlider
          class="vrx-color-picker-hue-slider"
          :color
          :disabled
          @change="handleChange"
        />
        <HSVColorAlphaSlider
          class="vrx-color-picker-alpha-slider"
          :color
          :disabled
          @change="handleChange"
        />
      </div>
      <HSVColorBlock :color :disabled class="vrx-color-picker-preview" />
    </div>
  </div>
</template>

index.scss

$vrx-color-picker-border: var(--vp-c-bg-alt);
$vrx-color-picker-dot: var(--vp-c-bg);
$vrx-color-picker-block-size: 40px;
@import '@vrx/color-picker-kit-style/scss/index.scss';
.#{$prefix} {
  width: 260px;
  box-shadow: $vrx-color-picker-shadow;
  border-radius: $vrx-color-picker-block-rounded;
  .#{$prefix}-palette {
    height: 178px;
  }
  .#{$prefix}-control-wrapper {
    display: flex;
    padding: 10px;
  }
  .#{$prefix}-slider-group {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
  }

  .#{$prefix}-hue-slider {
    margin-bottom: 10px;
  }
}