feat(dropdown): support default value display

CHANGELOG.md

@@ -9,7 +9,7 @@
 
 ### Features
 
-* include documents in npm package for ai agents ([#960](https://github.com/WeBankFinTech/fes-design/issues/960)) ([3cc476c](https://github.com/WeBankFinTech/fes-design/commit/3cc476c81fb652c7fc3887884d99b46a02de0b74))
+* feat(dropdown): 支持默认值显示 ([#910](https://github.com/WeBankFinTech/fes-design/issues/910))
 
 
 

components/dropdown/__tests__/dropdown-910.spec.tsx

@@ -0,0 +1,77 @@
+import { mount } from '@vue/test-utils';
+import Dropdown from '../dropdown';
+import { ref } from 'vue';
+
+const POPPER_CONTAINER_SELECTOR = '.fes-popper-wrapper';
+
+const OPTIONS = [
+    {
+        value: '1',
+        label: '删除',
+    },
+    {
+        value: '2',
+        label: '修改',
+    },
+    {
+        value: '3',
+        label: '添加',
+    },
+    {
+        value: '4',
+        label: '评论',
+    },
+    {
+        value: '5',
+        label: '收藏',
+    },
+];
+
+describe('Dropdown #910', () => {
+    test('trigger slot receives selectedLabel and selectedValue', async () => {
+        const wrapper = mount(Dropdown, {
+            props: {
+                options: OPTIONS,
+                appendToContainer: false,
+            },
+            slots: {
+                default: ({ selectedLabel, selectedValue }) => (
+                    <div class="trigger-slot">
+                        {selectedLabel}-{selectedValue}
+                    </div>
+                ),
+            },
+            attachTo: 'body',
+        });
+
+        await wrapper.find('.trigger-slot').trigger('mouseenter');
+        // No v-model: both should be undefined → template string renders as "-"
+        const text = wrapper.find('.trigger-slot').text();
+        expect(text.startsWith('-')).toBe(true);
+        expect(text).not.toContain('undefined');
+    });
+
+    test('mount FDropdown with v-model and default slot displays selectedLabel', async () => {
+        const value = ref('2');
+        const wrapper = mount(Dropdown, {
+            props: {
+                options: OPTIONS,
+                modelValue: value.value,
+                appendToContainer: false,
+            },
+            slots: {
+                default: ({ selectedLabel }) => (
+                    <div class="trigger-slot">{selectedLabel}</div>
+                ),
+            },
+            attachTo: 'body',
+        });
+
+        await wrapper.find('.trigger-slot').trigger('mouseenter');
+        expect(wrapper.find('.trigger-slot').text()).toBe('修改');
+
+        await wrapper.setProps({ modelValue: '3' });
+        await wrapper.find('.trigger-slot').trigger('mouseenter');
+        expect(wrapper.find('.trigger-slot').text()).toBe('添加');
+    });
+});

components/dropdown/dropdown.tsx

@@ -96,22 +96,42 @@ export default defineComponent({
             </Scrollbar>
         );
 
-        return () => (
-            <Popper
-                v-model={visible.value}
-                trigger={props.trigger}
-                placement={props.placement}
-                popperClass={[`${prefixCls}-popper`, props.popperClass]}
-                appendToContainer={props.appendToContainer}
-                getContainer={props.getContainer}
-                offset={props.offset}
-                disabled={props.disabled}
-                arrow={props.arrow}
-                v-slots={{
-                    default: renderOptions,
-                    trigger: slots.default,
-                }}
-            />
-        );
+        return () => {
+            const selectedOption = props.options.find(
+                (option) => option[props.valueField] === currentValue.value,
+            );
+            const selectedLabel = selectedOption
+                ? selectedOption[props.labelField]
+                : undefined;
+            const slotContent = slots.default?.({
+                selectedLabel:
+                    typeof selectedLabel === 'function'
+                        ? selectedLabel(selectedOption)
+                        : selectedLabel,
+                selectedValue: currentValue.value,
+            });
+            return (
+                <Popper
+                    v-model={visible.value}
+                    trigger={props.trigger}
+                    placement={props.placement}
+                    popperClass={[
+                        `${prefixCls}-popper`,
+                        props.popperClass,
+                    ]}
+                    appendToContainer={props.appendToContainer}
+                    getContainer={props.getContainer}
+                    offset={props.offset}
+                    disabled={props.disabled}
+                    arrow={props.arrow}
+                    v-slots={{
+                        default: renderOptions,
+                        trigger: slotContent.length
+                            ? () => slotContent
+                            : () => selectedLabel,
+                    }}
+                />
+            );
+        };
     },
 });

vitest.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
     plugins: [vue(), vueJsx()],
     test: {
         environment: 'happy-dom',
-        include: ['components/**/__tests__/**/*.spec.ts'],
+        include: ['components/**/__tests__/**/*.{spec,test}.{ts,tsx}'],
         globals: true,
     },
 })