From 4f04bcd46fc99a44c679e53ddb0d3d663162af1e Mon Sep 17 00:00:00 2001 From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com> Date: Mon, 11 Nov 2024 17:10:48 +0800 Subject: [PATCH] feat(components): [select] add `offset` and `show-arrow` prop (#18837) feat: add show-arrow prop to control dropdown arrow visibility --- docs/en-US/component/select-v2.md | 2 ++ docs/en-US/component/select.md | 2 ++ packages/components/select-v2/src/defaults.ts | 14 ++++++++++++++ packages/components/select-v2/src/select.vue | 2 ++ packages/components/select/src/select.ts | 14 ++++++++++++++ packages/components/select/src/select.vue | 2 ++ 6 files changed, 36 insertions(+) diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index 20f04050b2..3843d8dd20 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -254,6 +254,8 @@ select-v2/custom-label | remote | whether search data from server | ^[boolean] | false | | remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | ^[Function]`(keyword: string) => void` | — | | validate-event | whether to trigger form validation | ^[boolean] | true | +| offset ^(2.8.8) | offset of the dropdown | ^[number] | 12 | +| show-arrow ^(2.8.8) | whether the dropdown has an arrow | ^[boolean] | true | | placement | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start | | fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] | | collapse-tags-tooltip ^(2.3.0) | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | ^[boolean] | false | diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index 5e14ac2799..018d7b42e3 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -223,6 +223,8 @@ select/custom-label | tag-type | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info | | tag-effect ^(2.7.7) | tag effect | ^[enum]`'' \| 'light' \| 'dark' \| 'plain'` | light | | validate-event | whether to trigger form validation | ^[boolean] | true | +| offset ^(2.8.8) | offset of the dropdown | ^[number] | 12 | +| show-arrow ^(2.8.8) | whether the dropdown has an arrow | ^[boolean] | true | | placement ^(2.2.17) | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start | | fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] | | max-collapse-tags ^(2.3.0) | the max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 | diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts index d3161f8c70..76cbcb6e10 100644 --- a/packages/components/select-v2/src/defaults.ts +++ b/packages/components/select-v2/src/defaults.ts @@ -237,6 +237,20 @@ export const SelectProps = buildProps({ type: Boolean, default: true, }, + /** + * @description offset of the dropdown + */ + offset: { + type: Number, + default: 12, + }, + /** + * @description Determines whether the arrow is displayed + */ + showArrow: { + type: Boolean, + default: true, + }, /** * @description position of dropdown */ diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue index 7d03534a36..d86a0ee3bf 100644 --- a/packages/components/select-v2/src/select.vue +++ b/packages/components/select-v2/src/select.vue @@ -22,6 +22,8 @@ trigger="click" :persistent="persistent" :append-to="appendTo" + :show-arrow="showArrow" + :offset="offset" @before-show="handleMenuEnter" @hide="states.isBeforeHide = false" > diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts index d4d2001ee9..c9f60f99e0 100644 --- a/packages/components/select/src/select.ts +++ b/packages/components/select/src/select.ts @@ -209,6 +209,20 @@ export const SelectProps = buildProps({ * @description in remote search method show suffix icon */ remoteShowSuffix: Boolean, + /** + * @description determines whether the arrow is displayed + */ + showArrow: { + type: Boolean, + default: true, + }, + /** + * @description offset of the dropdown + */ + offset: { + type: Number, + default: 12, + }, /** * @description position of dropdown */ diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index b5800fec00..5dfdd1a19e 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -22,6 +22,8 @@ :gpu-acceleration="false" :persistent="persistent" :append-to="appendTo" + :show-arrow="showArrow" + :offset="offset" @before-show="handleMenuEnter" @hide="states.isBeforeHide = false" >