feat(ColorPicker): support fixed props

Tencent · Jan 2, 2025 · afc96ee · afc96ee
1 parent 6ef0421
commit afc96ee
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/src/color-picker/README.en-US.md b/src/color-picker/README.en-US.md
@@ -10,6 +10,7 @@ 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
+fixed | Boolean | false | `1.8.5` | 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

diff --git a/src/color-picker/README.md b/src/color-picker/README.md
@@ -44,6 +44,7 @@ style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
 enable-alpha | Boolean | false | 是否开启透明通道 | N
+fixed | Boolean | false | `1.8.5`。如果 color-picker 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | 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

diff --git a/src/color-picker/color-picker.ts b/src/color-picker/color-picker.ts
@@ -17,14 +17,14 @@ import { Color, getColorObject } from './utils';
 const { prefix } = config;
 const name = `${prefix}-color-picker`;
 
-const getCoordinate = (e, react, isPopup?: boolean) => {
+const getCoordinate = (e, react, isFixed?: boolean) => {
   const { pageX, pageY, clientY } = e.changedTouches[0] || {};
 
-  const offsetY = isPopup ? react.top : e.currentTarget?.offsetTop;
+  const offsetY = isFixed ? react.top : e.currentTarget?.offsetTop;
 
   return {
     x: Math.min(Math.max(0, pageX - react.left), react.width),
-    y: Math.min(Math.max(0, (isPopup ? clientY : pageY) - offsetY), react.height),
+    y: Math.min(Math.max(0, (isFixed ? clientY : pageY) - offsetY), react.height),
   };
 };
 
@@ -312,7 +312,8 @@ export default class ColorPicker extends SuperComponent {
     },
 
     handleSaturationDrag(e) {
-      const coordinate = getCoordinate(e, this.data.panelRect, this.properties.usePopup);
+      const { usePopup, fixed } = this.properties;
+      const coordinate = getCoordinate(e, this.data.panelRect, usePopup || fixed);
       const { saturation, value } = this.getSaturationAndValueByCoordinate(coordinate);
       this.onChangeSaturation({ saturation, value });
     },

diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts
@@ -16,6 +16,11 @@ const props: TdColorPickerProps = {
     type: Boolean,
     value: false,
   },
+  /** 如果 color-picker 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true */
+  fixed: {
+    type: Boolean,
+    value: false,
+  },
   /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */
   format: {
     type: String,

diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts
@@ -23,6 +23,14 @@ export interface TdColorPickerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
    * @default RGB