From 8051a9760d0621ad4b0fd668354292b295bd9740 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 26 Mar 2025 11:30:58 +0800
Subject: [PATCH] docs(select): [select] add dropdown menu top slot official
 website documen (#3186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(select): [select] add dropdown menu top slot official website documen

* fix(select): 修正测试用例中的选择器，更新为正确的插槽标识符
---
 examples/sites/demos/apis/select.js                 | 13 ++++++++++++-
 ...i.vue => slot-header-footer-composition-api.vue} | 10 ++++++++++
 ...ot-footer.spec.ts => slot-header-footer.spec.ts} |  5 +++--
 .../{slot-footer.vue => slot-header-footer.vue}     | 10 ++++++++++
 examples/sites/demos/pc/app/select/webdoc/select.js | 13 +++++++------
 5 files changed, 42 insertions(+), 9 deletions(-)
 rename examples/sites/demos/pc/app/select/{slot-footer-composition-api.vue => slot-header-footer-composition-api.vue} (77%)
 rename examples/sites/demos/pc/app/select/{slot-footer.spec.ts => slot-header-footer.spec.ts} (75%)
 rename examples/sites/demos/pc/app/select/{slot-footer.vue => slot-header-footer.vue} (79%)

diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index c48209760..463129f6a 100644
--- a/examples/sites/demos/apis/select.js
+++ b/examples/sites/demos/apis/select.js
@@ -843,9 +843,20 @@ export default {
             'en-US': 'Pull down the bottom slot of the pop-up box'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'slot-footer',
+          pcDemo: 'slot-header-footer',
           mfDemo: 'slot-footer'
         },
+        {
+          name: 'dropdown',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '下拉弹框顶部插槽',
+            'en-US': 'Pull down the pop-up box slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-header-footer'
+        },
         {
           name: 'prefix',
           type: '',
diff --git a/examples/sites/demos/pc/app/select/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/select/slot-header-footer-composition-api.vue
similarity index 77%
rename from examples/sites/demos/pc/app/select/slot-footer-composition-api.vue
rename to examples/sites/demos/pc/app/select/slot-header-footer-composition-api.vue
index 14830de86..506a79c2e 100644
--- a/examples/sites/demos/pc/app/select/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-header-footer-composition-api.vue
@@ -1,6 +1,11 @@
 <template>
   <tiny-select v-model="value">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #dropdown>
+      <div class="select-header">
+        <tiny-button type="success" round> 顶部插槽 </tiny-button>
+      </div>
+    </template>
     <template #footer>
       <div class="select-footer">
         <tiny-button type="success" round> 底部插槽 </tiny-button>
@@ -32,4 +37,9 @@ const value = ref('')
   background-color: rgb(207, 243, 232, 0.3);
   padding: 8px;
 }
+.select-header {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/select/slot-footer.spec.ts b/examples/sites/demos/pc/app/select/slot-header-footer.spec.ts
similarity index 75%
rename from examples/sites/demos/pc/app/select/slot-footer.spec.ts
rename to examples/sites/demos/pc/app/select/slot-header-footer.spec.ts
index 5c6586202..e3427c803 100644
--- a/examples/sites/demos/pc/app/select/slot-footer.spec.ts
+++ b/examples/sites/demos/pc/app/select/slot-header-footer.spec.ts
@@ -2,9 +2,9 @@ import { expect, test } from '@playwright/test'
 
 test('底部插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#slot-footer')
+  await page.goto('select#slot-header-footer')
 
-  const wrap = page.locator('#slot-footer')
+  const wrap = page.locator('#slot-header-footer')
   const select = wrap.locator('.tiny-select')
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
@@ -12,5 +12,6 @@ test('底部插槽', async ({ page }) => {
 
   await input.click()
   await expect((await option.all()).length).toEqual(5)
+  await expect(page.locator('.select-header')).toHaveText('顶部插槽')
   await expect(page.locator('.select-footer')).toHaveText('底部插槽')
 })
diff --git a/examples/sites/demos/pc/app/select/slot-footer.vue b/examples/sites/demos/pc/app/select/slot-header-footer.vue
similarity index 79%
rename from examples/sites/demos/pc/app/select/slot-footer.vue
rename to examples/sites/demos/pc/app/select/slot-header-footer.vue
index 49b7f5a56..1c5bc9686 100644
--- a/examples/sites/demos/pc/app/select/slot-footer.vue
+++ b/examples/sites/demos/pc/app/select/slot-header-footer.vue
@@ -1,6 +1,11 @@
 <template>
   <tiny-select v-model="value">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #dropdown>
+      <div class="select-header">
+        <tiny-button type="success" round> 顶部插槽 </tiny-button>
+      </div>
+    </template>
     <template #footer>
       <div class="select-footer">
         <tiny-button type="success" round> 底部插槽 </tiny-button>
@@ -42,4 +47,9 @@ export default {
   background-color: rgb(207, 243, 232, 0.3);
   padding: 8px;
 }
+.select-header {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/select/webdoc/select.js b/examples/sites/demos/pc/app/select/webdoc/select.js
index 707165a93..995952113 100644
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/examples/sites/demos/pc/app/select/webdoc/select.js
@@ -568,17 +568,18 @@ export default {
       codeFiles: ['slot-default.vue']
     },
     {
-      demoId: 'slot-footer',
+      demoId: 'slot-header-footer',
       name: {
-        'zh-CN': '底部插槽',
-        'en-US': 'Footer slot'
+        'zh-CN': '下拉框顶部和底部插槽',
+        'en-US': 'Dropdown top and bottom slots'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>footer</code> 插槽自定义下拉弹框底部的 HTML 模板。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>footer</code> 插槽自定义下拉弹框底部的 HTML 模板。通过 <code>dropdown</code> 插槽自定义下拉弹框顶部的 HTML 模板。</p>\n',
         'en-US':
-          '<p>Customize the HTML template at the bottom of the dropdown pop-up box through the <code>footer</code> slot.</p>'
+          '<p>Customize the HTML template at the bottom of the dropdown pop-up box through the <code>footer</code> slot. Customize the HTML template at the top of the dropdown pop-up box through the <code>dropdown</code> slot.</p>'
       },
-      codeFiles: ['slot-footer.vue']
+      codeFiles: ['slot-header-footer.vue']
     },
     {
       demoId: 'slot-empty',