feat(ColorPicker): add header and footer slots (#3310)

Tencent · Nov 28, 2024 · e46ed43 · e46ed43
1 parent 3ba5f0e
commit e46ed43
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/src/color-picker/README.en-US.md b/src/color-picker/README.en-US.md
@@ -10,7 +10,9 @@ style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 auto-close | Boolean | true | \- | N
 enable-alpha | Boolean | false | \- | N
+footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+header | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
 swatch-colors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
 type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N

diff --git a/src/color-picker/README.md b/src/color-picker/README.md
@@ -44,7 +44,9 @@ style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
 enable-alpha | Boolean | false | 是否开启透明通道 | N
+footer | Slot | - | 底部插槽，仅在 `usePopup` 为 `true` 时有效。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+header | Slot | - | 顶部插槽，仅在 `usePopup` 为 `true` 时有效。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 popup-props | Object | {} | popupProps透传。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
 swatch-colors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
 type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N

diff --git a/src/color-picker/color-picker.less b/src/color-picker/color-picker.less
@@ -216,7 +216,7 @@
     text-align: center;
     line-height: 56rpx;
     height: 56rpx;
-    margin: 40rpx 0 56rpx 0;
+    margin-top: 40rpx;
   }
 
   &__format-item {
@@ -270,6 +270,7 @@
   }
 
   &__swatches-wrap {
+    margin-top: 56rpx;
     position: relative;
   }
 

diff --git a/src/color-picker/color-picker.ts b/src/color-picker/color-picker.ts
@@ -64,6 +64,10 @@ const genSwatchList = (prop) => {
 
 @wxComponent()
 export default class ColorPicker extends SuperComponent {
+  options = {
+    multipleSlots: true,
+  };
+
   properties = props;
 
   observers = {

diff --git a/src/color-picker/color-picker.wxml b/src/color-picker/color-picker.wxml
@@ -11,7 +11,9 @@
   placement="bottom"
   bind:visible-change="onVisibleChange"
 >
+  <slot name="header" />
   <include src="./template.wxml" />
+  <slot name="footer" />
 </t-popup>
 <block wx:else>
   <include src="./template.wxml" />