feat(color-picker): add logic for disabledAlpha

arco-design · Feb 6, 2024 · ddec0bc · ddec0bc
1 parent aecd552
commit ddec0bc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/packages/web-vue/components/color-picker/color-picker.tsx b/packages/web-vue/components/color-picker/color-picker.tsx
@@ -167,11 +167,11 @@ export default defineComponent({
     const formatValue = computed(() => {
       const { r, g, b } = color.value.rgb;
       if (props.format === 'rgb') {
-        return alpha.value < 1
+        return alpha.value < 1 && !props.disabledAlpha
           ? `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})`
           : `rgb(${r}, ${g}, ${b})`;
       }
-      return alpha.value < 1
+      return alpha.value < 1 && !props.disabledAlpha
         ? `#${rgbaToHex(r, g, b, alpha.value)}`
         : `#${rgbToHex(r, g, b)}`;
     });

diff --git a/packages/web-vue/components/color-picker/input-hex.tsx b/packages/web-vue/components/color-picker/input-hex.tsx
@@ -72,11 +72,13 @@ export default defineComponent({
           // @ts-ignore
           onPaste={onPaste}
         />
-        <InputAlpha
-          disabled={props.disabled}
-          value={props.alpha}
-          onChange={props.onAlphaChange}
-        />
+        {!props.disabledAlpha && (
+          <InputAlpha
+            disabled={props.disabled}
+            value={props.alpha}
+            onChange={props.onAlphaChange}
+          />
+        )}
       </InputGroup>
     );
   },

diff --git a/packages/web-vue/components/color-picker/input-rgb.tsx b/packages/web-vue/components/color-picker/input-rgb.tsx
@@ -46,11 +46,13 @@ export default defineComponent({
             onChange={(val = 0) => handleChange({ [channel]: val })}
           />
         ))}
-        <InputAlpha
-          disabled={props.disabled}
-          value={props.alpha}
-          onChange={props.onAlphaChange}
-        />
+        {!props.disabledAlpha && (
+          <InputAlpha
+            disabled={props.disabled}
+            value={props.alpha}
+            onChange={props.onAlphaChange}
+          />
+        )}
       </InputGroup>
     );
   },

diff --git a/packages/web-vue/components/color-picker/panel.tsx b/packages/web-vue/components/color-picker/panel.tsx
@@ -135,13 +135,15 @@ export default defineComponent({
                   props.onHsvChange?.({ h, s: hsv.value.s, v: hsv.value.v })
                 }
               />
-              <ControlBar
-                type="alpha"
-                x={props.alpha}
-                color={props.color}
-                colorString={props.colorString}
-                onChange={props.onAlphaChange}
-              />
+              {!props.disabledAlpha && (
+                <ControlBar
+                  type="alpha"
+                  x={props.alpha}
+                  color={props.color}
+                  colorString={props.colorString}
+                  onChange={props.onAlphaChange}
+                />
+              )}
             </div>
             <div
               class={`${prefixCls}-preview`}