javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [color-picker] add persistent and append-to prop (#21393)

Browse Source
This commit is contained in:
btea
2025-07-18 08:10:05 +08:00
committed by GitHub
parent 80157249ef
commit 5cc42ad9fc
3 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/en-US/component/color-picker.md
View File

@@ -60,6 +60,8 @@ color-picker/sizes
| id | ColorPicker id | ^[string] | — |
| teleported ^(2.7.2) | whether color-picker popper is teleported to the body | ^[boolean] | true |
| label ^(a11y) ^(deprecated) | ColorPicker aria-label | ^[string] | — |
| persistent ^(2.10.5) | when color-picker inactive and persistent is false, the color panel will be destroyed | ^[boolean] | true |
| append-to ^(2.10.5) | which element the color-picker panel appends to | ^[CSSSelector] / ^[HTMLElement] | - |
### Events

11
packages/components/color-picker/src/color-picker.ts
View File

@@ -17,6 +17,13 @@ import type {
import type ColorPicker from './color-picker.vue'
export const colorPickerProps = buildProps({
/**
* @description when color-picker inactive and persistent is false, the color panel will be destroyed
*/
persistent: {
type: Boolean,
default: true,
},
/**
* @description binding value
*/
@@ -62,6 +69,10 @@ export const colorPickerProps = buildProps({
* @description whether color-picker popper is teleported to the body
*/
teleported: useTooltipContentProps.teleported,
/**
* @description which color-picker panel appends to
*/
appendTo: useTooltipContentProps.appendTo,
/**
* @description predefined color options
*/

3
packages/components/color-picker/src/color-picker.vue
View File

@@ -12,7 +12,8 @@
trigger="click"
:teleported="teleported"
:transition="`${ns.namespace.value}-zoom-in-top`"
persistent
:persistent="persistent"
:append-to="appendTo"
@hide="setShowPicker(false)"
>
<template #content>