目前官方还没有取色器组件不过可以使用开源库

安装库依赖

ohpm i @keke/color-picker

库基本使用

HSBColorPicker({
  color: "#ffb76b",
  showAlpha: true,
  radius: 20,
  onChange: (color: string) => {
    toastUtil(color, this.getUIContext());
  },
});

onChange的color是一个标准的16进制值#fbb76d
color是组件的默认选择颜色
radius是圆角
showAlpha是是否显示透明度滑块

完整使用

 @Local popup:boolean = false
  @Builder
  PopupBuilder(){
    HSBColorPicker({
      color:"#ffb76b",
      showAlpha:true,
      radius:20,
      onChange: (color: string) => {
        toastUtil(color,this.getUIContext())
      }
    })
      .height(200)
  }

Button("popup")
  .bindPopup(this.popup, {
    builder: this.PopupBuilder,
  })
  .onClick((event: ClickEvent) => {
    this.popup = !this.popup;
  });

这样当点击的时候就可以显示颜色的取色器了

关于

关于库的详细使用文档