feat(Select): 增加 OptionList 顶部插槽

WeBankFinTech · Jan 26, 2024 · 94ca93f · 94ca93f
1 parent 7fbfe2d
commit 94ca93f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 47 deletions.
diff --git a/components/select/select.vue b/components/select/select.vue
@@ -37,6 +37,13 @@
                 />
             </template>
             <template #default>
+                <div
+                    v-if="$slots.header"
+                    :class="`${prefixCls}-addon ${prefixCls}-option-header`"
+                    @mousedown.prevent
+                >
+                    <slot name="header" />
+                </div>
                 <OptionList
                     :hoverOptionValue="hoverOptionValue"
                     :options="filteredOptions"
@@ -54,10 +61,18 @@
                     @mousedown.prevent
                 />
                 <div
-                    v-if="$slots.addon"
-                    :class="`${prefixCls}-addon`"
+                    v-if="$slots.footer"
+                    :class="`${prefixCls}-addon ${prefixCls}-option-footer`"
+                    @mousedown.prevent
+                >
+                    <slot name="footer" />
+                </div>
+                <div
+                    v-else-if="$slots.addon"
+                    :class="`${prefixCls}-addon ${prefixCls}-option-footer`"
                     @mousedown.prevent
                 >
+                    {{ warnDeprecatedSlot() }}
                     <slot name="addon" />
                 </div>
             </template>
@@ -440,6 +455,11 @@ export default defineComponent({
             }
         };
 
+        const warnDeprecatedSlot = () =>
+            console.warn(
+                '[FSelect]: addon 插槽即将废弃，请使用 footer 插槽代替',
+            );
+
         return {
             prefixCls,
             isOpenedRef,
@@ -465,6 +485,7 @@ export default defineComponent({
             hoverOptionValue,
             onHover,
             onKeyDown,
+            warnDeprecatedSlot,
         };
     },
 });

diff --git a/components/select/style/index.less b/components/select/style/index.less
@@ -35,8 +35,15 @@
     &-addon {
         .text();
         padding: @padding-xs;
-        border-top: var(--f-border-width-base) var(--f-border-style-base)
+
+        @border-line:var(--f-border-width-base) var(--f-border-style-base)
             var(--f-border-color-split);
+        &.@{select-prefix-cls}-option-header {
+            border-bottom: @border-line;
+        }
+        &.@{select-prefix-cls}-option-footer {
+            border-top: @border-line;
+        }
     }
     &-null {
         text-align: center;

diff --git a/docs/.vitepress/components/select/addon.vue b/docs/.vitepress/components/select/addon.vue
@@ -1,44 +1,21 @@
 <template>
-    <FSelect
-        filterable
-        valueField="key"
-        labelField="name"
-        :options="optionList"
-    >
-        <template #addon>
-            <div class="addon">如果你点开了这个例子，可能你需要它</div>
+    <FSelect filterable :options="optionList">
+        <template #header>
+            <div>如果你点开了这个例子</div>
+        </template>
+        <template #footer>
+            <div>可能你需要它</div>
         </template>
     </FSelect>
 </template>
-<script>
-import { reactive } from 'vue';
-
-const TOTAL_COUNT = 10000;
+<script setup lang="ts">
+import { ref } from 'vue';
 
-const DataItems = [];
-let count = TOTAL_COUNT;
-while (count--) {
-    const index = TOTAL_COUNT - count;
-    DataItems.push({
-        name: index,
-        key: index,
-    });
-}
+const TOTAL_COUNT = 20;
 
-export default {
-    setup() {
-        const optionList = reactive(DataItems);
-        return {
-            optionList,
-        };
-    },
-};
+const optionList = ref(
+    new Array(TOTAL_COUNT)
+        .fill(undefined)
+        .map((_, index) => ({ value: index + 1, label: index + 1 })),
+);
 </script>
-<style scoped>
-.fes-select {
-    width: 200px;
-}
-.action {
-    border-top: 1px;
-}
-</style>
diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md
@@ -118,7 +118,7 @@ clearable.vue
 nodata.vue
 :::
 
-### 底部插槽
+### 顶部、底部插槽
 
 如果你点开了这个例子，可能你需要它
 
@@ -175,13 +175,15 @@ selectGroupOption.vue
 
 ## Select Slots
 
-| 名称    | 说明                                           | 参数                                               |
-| ------- | ---------------------------------------------- | -------------------------------------------------- |
-| default | option 和 selectGroupOption 组件列表           | -                                                  |
-| empty   | 无选项的内容                                   | -                                                  |
-| option  | 自定义 `Option` 内容                           | _{ value, label, disabled, isSelected }_           |
+| 名称    | 说明                                          | 参数                                               |
+|---------|---------------------------------------------|----------------------------------------------------|
+| default | option 和 selectGroupOption 组件列表          | -                                                  |
+| empty   | 无选项的内容                                  | -                                                  |
+| option  | 自定义 `Option` 内容                          | _{ value, label, disabled, isSelected }_           |
 | tag     | 控制标签的渲染，自定义选中选项在选择框如何展示 | _{ option: SelectOption, handleClose: ()=> void }_ |
-| addon   | 弹框底部显示自定义的内容                       | -                                                  |
+| header  | 弹框顶部显示自定义的内容                      | -                                                  |
+| footer  | 弹框底部显示自定义的内容                      | -                                                  |
+| addon   | 即将废弃，请使用 footer                        | -                                                  |
 
 ## Select Methods