feat(components): [color-picker] add custom trigger

docs/en-US/component/color-picker.md

@@ -45,6 +45,14 @@ color-picker/sizes
 
 :::
 
+## Custom trigger
+
+:::demo
+
+color-picker/custom-trigger
+
+:::
+
 ## API
 
 ### Attributes
@@ -75,6 +83,12 @@ color-picker/sizes
 | focus ^(2.4.0) | triggers when Component focuses                | ^[Function]`(event: FocusEvent) => void` |
 | blur ^(2.4.0)  | triggers when Component blurs                  | ^[Function]`(event: FocusEvent) => void` |
 
+### Slots
+
+| Name           | Description                                    | Type                                     |
+| -------------- | ---------------------------------------------- | ---------------------------------------- |
+| default         | custom trigger             | -    |
+
 ### Exposes
 
 | Name            | Description               | Type                    |

docs/examples/color-picker/custom-trigger.vue

@@ -0,0 +1,11 @@
+<template>
+  <el-color-picker v-model="color">
+    <el-button :color="color">trigger</el-button>
+  </el-color-picker>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const color = ref('rgba(19, 206, 102, 0.8)')
+</script>

packages/components/color-picker/__tests__/color-picker.test.tsx

@@ -2,6 +2,7 @@ import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { ElFormItem } from '@element-plus/components/form'
+import Button from '@element-plus/components/button'
 import ColorPicker from '../src/color-picker.vue'
 import type { ComponentPublicInstance } from 'vue'
 
@@ -469,4 +470,19 @@ describe('Color-picker', () => {
     expect(blurHandler).toHaveBeenCalledTimes(1)
     wrapper.unmount()
   })
+
+  it('custom trigger', async () => {
+    const wrapper = mount(() => (
+      <ColorPicker>
+        <Button>trigger</Button>
+      </ColorPicker>
+    ))
+
+    await nextTick()
+    const trigger = wrapper.find('.el-button')
+    await trigger.trigger('click')
+    const dropdown = document.querySelector('.el-color-dropdown')
+    expect(dropdown).toBeTruthy()
+    wrapper.unmount()
+  })
 })

packages/components/color-picker/src/color-picker.vue

@@ -76,7 +76,10 @@
         @blur="handleBlur"
       >
         <div v-if="colorDisabled" :class="ns.be('picker', 'mask')" />
-        <div :class="ns.be('picker', 'trigger')" @click="handleTrigger">
+        <div v-if="$slots.default" @click="handleTrigger">
+          <slot />
+        </div>
+        <div v-else :class="ns.be('picker', 'trigger')" @click="handleTrigger">
           <span :class="[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]">
             <span
               :class="ns.be('picker', 'color-inner')"