自定义二级下拉面板

通过 item.type = custom 开启自定义二级下拉面板功能，并在 item.slotName 自定义对应的二级面板插槽名，对应的编辑态自定义面板插槽名为 ${item.slotName}-edit

<template>
  <ClientOnly>
    <tiny-search-box v-model="tags" :items="items" editable @change="onChange">
      <!-- autocomplete对应的自定义二级面板 -->
      <template #autocomplete="scope">
        <div class="tvp-search-box__date-wrap">
          <div class="tvp-search-box__dropdown-title">选择人员</div>
          我是人员自定义面板
        </div>
      </template>
      <!-- other对应的自定义二级面板 -->
      <template #other="scope">
        <span @click.stop="scope.onConfirm({ value: 'other' })">other</span>
      </template>
      <!-- 编辑状态下：autocomplete对应的自定义面板 -->
      <template #autocomplete-edit="scope">
        <div class="tvp-search-box__date-wrap">
          <div class="tvp-search-box__dropdown-title">选择人员</div>
          我是人员自定义面板
        </div>
      </template>
      <!-- 编辑状态下：other对应的自定义二级面板 -->
      <template #other-edit="scope">
        <span @click="scope.onConfirm({ value: 'other' })"
          >我是other对应的编辑态自定义面板</span
        >
      </template>
    </tiny-search-box>
  </ClientOnly>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

const tags = ref([
  {
    label: "选择人员",
    field: "autocomplete",
    type: "custom",
    replace: true,
    slotName: "autocomplete",
    value: "5656",
  },
]);
const items = reactive([
  {
    label: "选择人员",
    field: "autocomplete",
    type: "custom",
    replace: true, // 支持单选
    slotName: "autocomplete", // 定义此属性类型对应的插槽名，并在以下的模板层使用
  },
  {
    label: "其他自定义",
    field: "other",
    type: "custom",
    slotName: "other", // 定义此属性类型对应的插槽名
  },
]);

const onChange = (newFilters, oldFilters) => {
  console.log("changeEvent:", newFilters, oldFilters);
};
</script>