ew-color-picker

简体中文

English

简体中文

English

Appearance

示例集 ​

下面是 12 个覆盖主要场景的最小示例。仓库 examples/ 目录下有对应的完整 HTML 文件，可直接用浏览器打开。

1. 基础用法 ​

html
<div id="app"></div>
<script src="@ew-color-picker/ew-color-picker/dist/index.min.js"></script>
<script>
  const picker = new ewColorPicker({ el: '#app', defaultColor: '#3b82f6' })
  picker.on('change', (color) => console.log(color))
</script>

2. 布局与方向 ​

ts
new ewColorPicker({
  el: '#app',
  hueDirection: 'horizontal',
  alphaDirection: 'horizontal',
  size: 'large',
})

3. 预定义颜色 ​

ts
new ewColorPicker({
  el: '#app',
  predefineColor: ['#ef4444', '#22c55e', '#3b82f6', { color: '#0f172a', disabled: true }],
})

4. 按钮控制 ​

ts
new ewColorPicker({
  el: '#app',
  hasClear: false,
  sureText: '应用颜色',
  sure: (color) => console.log('应用：', color),
})

5. 事件与回调 ​

ts
const picker = new ewColorPicker({
  el: '#app',
  changeColor: (color) => console.log('回调：', color),
})

picker.once('change', (color) => console.log('只监听一次：', color))
picker.on('sure', (color) => console.log('确定：', color))
picker.on('clear', () => console.log('清空'))
picker.on('toggle', (open) => console.log('面板：', open ? '展开' : '收起'))

6. 面板自动定位 ​

ts
new ewColorPicker({
  el: '#app',
  autoPanelPosition: true,
  panelPlacement: 'top-end',
})

7. 开合动画 ​

ts
new ewColorPicker({
  el: '#app',
  togglePickerAnimation: 'height',
  pickerAnimationTime: 300,
})

可用动画：default、height、opacity。pickerAnimationTime 上限 10000ms。

8. 禁用与只读 ​

ts
// 完全禁用
new ewColorPicker({ el: '#app', disabled: true })

// 只读：阻止点击，仅展示
new ewColorPicker({ el: '#app', readonly: true, defaultColor: '#84cc16' })

9. 颜色模式 ​

ts
new ewColorPicker({
  el: '#app',
  defaultMode: 'rgb',
  showColorMode: true,
  changeMode: (mode) => console.log('模式：', mode),
})

10. 实例 API ​

ts
const picker = new ewColorPicker({ el: '#app', defaultColor: '#f43f5e' })

console.log(picker.getColor())        // 当前颜色
console.log(picker.getHsvaColor())    // { h, s, v, a }
picker.setColor('#22c55e')
picker.updateOptions({ size: 'large' })
picker.showPanel()
picker.hidePanel()
picker.destroy()

11. 数字输入框 ​

ts
import { InputNumber } from '@ew-color-picker/input-number'
import '@ew-color-picker/style/dist/input-number.css'

const num = new InputNumber({
  value: 50,
  min: 0,
  max: 100,
  onChange: (v) => console.log(v),
})
document.body.appendChild(num.getElement())

12. 多实例 ​

ts
[...document.querySelectorAll('.picker')].forEach((el) => {
  new ewColorPicker({ el, defaultColor: '#a855f7' })
})

不要直接传 NodeList

构造函数不接受 NodeList / 数组，必须逐个实例化。每个实例的事件、挂载点、输入框都是隔离的。

相关 ​