feat(components): [color-picker] add show hide expose (element-pl…

…us#11942) * feat(components): [color-picker] add handleTrigger expose closed element-plus#11926
StetroF · Apr 1, 2023 · e6be1bc · e6be1bc
1 parent 80a0057
commit e6be1bc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/docs/en-US/component/color-picker.md b/docs/en-US/component/color-picker.md
@@ -72,6 +72,8 @@ color-picker/sizes
 
 ### Exposes
 
-| Name  | Description          | Type             |
-| ----- | -------------------- | ---------------- |
-| color | current color object | ^[object]`Color` |
+| Name  | Description               | Type                    |
+| ----- | ------------------------- | ----------------------- |
+| color | current color object      | ^[object]`Color`        |
+| show  | manually show ColorPicker | ^[Function]`() => void` |
+| hide  | manually hide ColorPicker | ^[Function]`() => void` |
diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
@@ -217,6 +217,11 @@ function setShowPicker(value: boolean) {
 
 const debounceSetShowPicker = debounce(setShowPicker, 100)
 
+function show() {
+  if (colorDisabled.value) return
+  setShowPicker(true)
+}
+
 function hide() {
   debounceSetShowPicker(false)
   resetColor()
@@ -331,5 +336,13 @@ defineExpose({
    * @description current color object
    */
   color,
+  /**
+   * @description manually show ColorPicker
+   */
+  show,
+  /**
+   * @description manually hide ColorPicker
+   */
+  hide,
 })
 </script>