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

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

* fix(select): 修正测试用例中的选择器，更新为正确的插槽标识符

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: '',

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>

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('底部插槽')
 })

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>

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',