扩展默认样式

使用

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';

覆盖内置变量

推荐使用 scss 覆盖，可覆盖的选项更多

scss

// 样式前缀
$prefix: vrx-color-picker !default;

// 拖拽组件颜色
$vrx-color-picker-dot: var(--#{$prefix}-dot, #fff) !default;
// 拖拽组件大小
$vrx-color-picker-dot-size: 16px !default;
// 颜色选择器边框部分颜色
$vrx-color-picker-border: var(--#{$prefix}-border, #e2e2e2) !default;
// 颜色选择器横向选择器高度
$vrx-color-picker-slider-size: 14px !default;
// 颜色展示组件的圆角
$vrx-color-picker-block-rounded: var(--#{$prefix}-block-rounded, 2px) !default;
// 默认阴影颜色
$vrx-color-picker-shadow: 0 2px 8px #00000026 !default;
// 颜色预览块默认大小
$vrx-color-picker-block-size: var(--#{$prefix}-block-size, 40px) !default;

css

:root {
  // 拖拽组件颜色
  --vrx-color-picker-dot : #fff;
  // 颜色展示组件的圆角
  --vrx-color-picker-block-rounded : 2px;
  // 默认阴影颜色
  --vrx-color-picker-border: #e2e2e2;
}

vue

<script lang="ts" setup>
  import { HSVColorPalette } from '@vrx/color-picker-kit'
</script>
<template>
  <!-- 或任意组件 -->
  <HSVColorPalette prefix="ant-color-picker" />
  <!-- 为内部 css class 替换前缀 -->
</template>

示例

通过覆盖默认样式简易实现一个类 Ant 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,
    }
  })

  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="ant-color-picker">
    <HSVColorPalette
      class="ant-color-picker-palette"
      prefix="ant-color-picker"
      :color
      :disabled
      @change="handleChange"
    />
    <div class="ant-color-picker-control-wrapper">
      <div class="ant-color-picker-slider-group">
        <HSVColorGradientSlider
          class="ant-color-picker-hue-slider"
          :color
          :disabled
          prefix="ant-color-picker"
          @change="handleChange"
        />
        <HSVColorAlphaSlider
          class="ant-color-picker-alpha-slider"
          :color
          :disabled
          prefix="ant-color-picker"
          @change="handleChange"
        />
      </div>
      <HSVColorBlock :color :disabled prefix="ant-color-picker" class="ant-color-picker-preview" />
    </div>
  </div>
</template>

index.scss

$vrx-color-picker-border: var(--vp-c-bg-alt);
$vrx-color-picker-block-rounded: 4px;
$prefix: ant-color-picker;
$vrx-color-picker-dot: var(--vp-c-bg);
$vrx-color-picker-dot-size: 12px;
$vrx-color-picker-slider-size: 8px;
$vrx-color-picker-block-size: 30px;
@import '@vrx/color-picker-kit-style/scss/index.scss';

.#{$prefix} {
  width: 223px;
  padding: 12px;
  box-shadow: $vrx-color-picker-shadow;
  border-radius: $vrx-color-picker-block-rounded;
  .#{$prefix}-palette {
    height: 160px;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .#{$prefix}-control-wrapper {
    display: flex;
  }
  .#{$prefix}-slider-group {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
  }

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