挂载到 body

通过 append-to-body 属性可将下拉面板/弹窗挂载到 body，避免在父容器 overflow: hidden 场景被裁剪。

<template>
  <ClientOnly>
    <div class="demo-append-body">
      <tiny-search-box
        v-model="tags1"
        :items="items"
        editable
        :append-to-body="false"
      />
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { dataSource } from './data-source'

const items = dataSource
const tags1 = ref([])
</script>

<style scoped>
.demo-append-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-title {
  margin-bottom: 8px;
  font-size: 14px;
}

.with-overflow {
  max-width: 480px;
  overflow: hidden;
}
</style>