Added slots to allow custom rendering panels

[chinyifei]

Types of changes

• New feature
• Bug fix
• Enhancement
• Component style change
• Typescript definition change
• Documentation change
• Coding style change
• Refactoring
• Test cases
• Continuous integration
• Breaking change
• Others

Background and context

起初是因为在做表单录入功能时，想实现飞书中的这种效果。发现color-picker组件不支持。

Solution

后面去看了ant design的ColorPicker组件，看到是使用panelRender自定义渲染函数。然后按着这个思路写了一版，后面发现对于vue来说使用插槽可能会更好，就改用了插槽的方式。
插槽把整体面板分了三大部分：调色板区域（palette）、控制条（controls）、颜色选择（color-section）颜色选择区域又增加了标题的两个插槽（history-title、preset-title）一共是五个插槽。插槽使用了作用域插槽，返回了原本默认渲染部分，可以使得用户更灵活的自定义。
本来添加插槽也可以实现最初的需求，只需要#palette和#controls 插槽内容返回空即可，但是为了方便还是增加了两个props：showPalette和showControls。

How is the change tested?

Changelog

Component	Changelog(CN)	Changelog(EN)	Related issues
color-picker	添加插槽允许用户自定义渲染面板	Added slots to allow custom rendering panels

Checklist:

• Test suite passes (npm run test)
• Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
• Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others
  should be submitted to main branch)

Other information

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview