feat(base-select): add panel slot

examples/sites/demos/apis/base-select.js

@@ -765,6 +765,16 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-reference',
           mfDemo: 'slot-reference'
+        },
+        {
+          name: 'panel',
+          desc: {
+            'zh-CN': '下拉面板插槽',
+            'en-US': 'Panel slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-panel',
+          mfDemo: 'slot-panel'
         }
       ]
     },

examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue

@@ -0,0 +1,71 @@
+<template>
+  <tiny-base-select v-model="value">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import { BaseSelect as TinyBaseSelect, Tree as TinyTree } from '@opentiny/vue'
+
+const value = ref('')
+
+const treeData = ref([
+  {
+    id: 1,
+    label: '一级 1',
+    children: [
+      {
+        id: 4,
+        label: '二级 1-1',
+        children: [
+          {
+            id: 9,
+            label: '三级 1-1-1'
+          },
+          {
+            id: 10,
+            label: '三级 1-1-2'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: '一级 2',
+    children: [
+      {
+        id: 5,
+        label: '二级 2-1'
+      },
+      {
+        id: 6,
+        label: '二级 2-2'
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/base-select/slot-panel.vue

@@ -0,0 +1,79 @@
+<template>
+  <tiny-base-select v-model="value">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            $nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
+</template>
+
+<script>
+import { BaseSelect, Tree } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyTree: Tree
+  },
+  data() {
+    return {
+      value: '',
+      treeData: [
+        {
+          id: 1,
+          label: '一级 1',
+          children: [
+            {
+              id: 4,
+              label: '二级 1-1',
+              children: [
+                {
+                  id: 9,
+                  label: '三级 1-1-1'
+                },
+                {
+                  id: 10,
+                  label: '三级 1-1-2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: '一级 2',
+          children: [
+            {
+              id: 5,
+              label: '二级 2-1'
+            },
+            {
+              id: 6,
+              label: '二级 2-2'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>

examples/sites/demos/pc/app/base-select/webdoc/base-select.js

@@ -491,6 +491,18 @@ export default {
       },
       codeFiles: ['slot-reference.vue']
     },
+    {
+      demoId: 'slot-panel',
+      name: {
+        'zh-CN': '下拉面板插槽',
+        'en-US': 'Panel slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>panel</code> 插槽自定义下拉面板的内容。</p>\n',
+        'en-US': '<p>Customize content of the panel through the <code>panel</code> slot.</p>'
+      },
+      codeFiles: ['slot-panel.vue']
+    },
     {
       demoId: 'slot-label',
       name: {

packages/vue/src/base-select/src/pc.vue

@@ -351,6 +351,15 @@
               <span>{{ topCreateText }}</span>
             </div>
           </div>
+          <slot
+            name="panel"
+            :props="{
+              state
+            }"
+            :methods="{
+              updateModelValue
+            }"
+          ></slot>
           <!-- tiny 新增 可搜索的输入框 -->
           <tiny-input
             v-if="searchable"
@@ -495,7 +504,13 @@
               </tiny-option>
             </slot>
           </tiny-scrollbar>
-          <template v-if="state.emptyText && (!allowCreate || loading || (allowCreate && state.emptyFlag))">
+          <template
+            v-if="
+              (options || slots.default) &&
+              state.emptyText &&
+              (!allowCreate || loading || (allowCreate && state.emptyFlag))
+            "
+          >
             <!-- tiny 新增 showEmptyImage功能 -->
             <div v-if="loadingText || slots.empty">
               <slot name="empty" v-if="slots.empty"></slot>