au-color-picker

vue3颜色选择控件，支持鼠标/手指的点击和拖动

用法

npm i @aurouscia/au-color-picker

//main.ts（必须导入样式）
import '@aurouscia/au-color-picker/style.css'

//xxx.vue
import { AuColorPicker } from '@aurouscia/au-color-picker';
import { AuColorPickerPresetsNested } from '@aurouscia/au-color-picker';

仅自定义

<AuColorPicker
    v-model="'绑定颜色值'"
    :initial="'初始值（优先级低于v-model）'"
    @done="'面板关闭回调'"
    ></AuColorPicker>

预设+自定义

⚠️注意：“选中的预设”是与“自定义颜色”独立的两个状态
这使得模型的颜色可以依赖于系统全局配置（预设的颜色）

const presets:NamedPreset[] = [
  {
    name: '水系', //名称不可重复
    colorHex: '#c3e5eb'
  },
  {
    name: '绿地',
    colorHex: '#ceeda4'
  },
]

<AuColorPickerPresetsNested 
    :presets="'预设列表'"
    v-model="'绑定颜色值'"
    :initial="'初始值（优先级低于v-model）'"
    v-model:model-value-selected-preset="'绑定预设name'"
    :initial-selected-preset="'初始选择预设（优先级低于v-model）'"
    @done="'面板关闭回调'"
    ></AuColorPickerPresetsNested>

覆盖当前值（旧版，新版直接赋值v-model）

const picker = ref<InstanceType<typeof AuColorPicker>>()
const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
function enforceToDemo(){
  picker.value?.enforceTo('#ff00ff')
  pickerNested.value?.enforceCustomValueTo('#ff00ff')
  pickerNested.value?.enforcePresetTo('水系')
}

组件属性定义

//位置描述
type Pos = 'left'|'right'|number

//AuColorPicker的属性
export interface PickerProps{
    initial?: string //初始值
    entryStyles?: CSSProperties //入口按钮的样式
    entryActiveStyles?: CSSProperties //入口按钮的样式（当面板展开）
    entryClassName?: string //入口按钮的类名
    pos?: Pos //面板位置描述
    panelBaseZIndex?:number //面板的zIndex基础值
    entryRespondDelay?:number //入口按钮点击后，面板展开的延迟（ms）
    panelClickStopPropagation?:boolean //面板点击是否阻止冒泡
    showPackageName?:boolean //是否显示包名
}

//AuColorPickerPresetsNested的属性
export interface PickerWithPresetsProps extends PickerProps{
    initialSelectedPreset?:string //初始选择预设名称（undefined即为自定义）
    presets?: NamedPreset[] //预设列表
    posInternal?: Pos //使用自定义时，自定义颜色选择器面板的位置描述
}

//预设列表项描述
export interface NamedPreset{
    colorHex:string,
    name:string
}

更新记录

1.0.0

修改了api

1.1.0

修复了旧浏览器上失效的问题（消除过新的context.reset函数）

许可证

MIT