feat(Select): 增加 Trigger 单独的 class、style 配置 (#840)

WeBankFinTech · Jun 14, 2024 · 1c11954 · 1c11954
1 parent c87f999
commit 1c11954
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/components/select/props.ts b/components/select/props.ts
@@ -1,4 +1,4 @@
-import type { ComponentObjectPropsOptions, PropType } from 'vue';
+import type { CSSProperties, ComponentObjectPropsOptions, PropType } from 'vue';
 import { extractPropsDefaultValue } from '../_util/utils';
 
 import type { ExtractPublicPropTypes, GetContainer } from '../_util/interface';
@@ -90,6 +90,8 @@ export const selectProps = {
         default: false,
     },
     popperClass: [String, Array, Object] as PropType<string | [] | object>,
+    triggerClass: [String, Array, Object] as PropType<string | [] | object>,
+    triggerStyle: [Object, String] as PropType<CSSProperties | string>,
 } as const satisfies ComponentObjectPropsOptions;
 
 export const selectPropsDefaultValue = extractPropsDefaultValue(selectProps);

diff --git a/components/select/select.vue b/components/select/select.vue
@@ -25,8 +25,8 @@
                     :collapseTags="collapseTags"
                     :collapseTagsLimit="collapseTagsLimit"
                     :tagBordered="tagBordered"
-                    :class="[{ 'is-error': isError }, attrs.class]"
-                    :style="attrs.style"
+                    :class="[{ 'is-error': isError }, triggerClass]"
+                    :style="triggerStyle"
                     :renderTag="$slots.tag"
                     @keydown.enter="onKeyDown"
                     @remove="onSelect"
@@ -96,7 +96,7 @@ export default defineComponent({
     },
     props: selectProps,
     emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'removeTag', 'visibleChange', 'focus', 'blur', 'clear', 'scroll', 'search'],
-    setup(props, { emit, attrs }) {
+    setup(props, { emit }) {
         useTheme();
         const { validate, isError, isFormDisabled } = useFormAdaptor({
             valueType: computed(() => (props.multiple ? 'array' : 'string')),
@@ -416,7 +416,6 @@ export default defineComponent({
             innerDisabled,
             onScroll,
             isLimitRef,
-            attrs,
             hoverOptionValue,
             onHover,
             onKeyDown,

diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md
@@ -159,6 +159,8 @@ selectGroupOption.vue
 | valueField           | 替代 `SelectOption` 中的 `value` 字段名                    | string                                       | `value`               |
 | labelField           | 替代 `SelectOption` 中的 `label` 字段名                    | string                                       | `label`               |
 | popperClass          | 弹出框容器样式                                             | string                                       | -                     |
+| triggerClass         | 弹出框触发器样式类                                         | string                                       | -                     |
+| triggerStyle         | 弹出框触发器样式                                           | string / object                              | -                     |
 
 ## Select Events