0

我不完全确定如何根据布尔值切换弹出框，在我的情况下：如果有搜索结果。我以为我可以只使用 open 属性。任何帮助表示赞赏！

总结一下这个组件：

  • 在输入中输入搜索词
  • 正在进行 API 调用并从 te API 返回结果
  • 然后应该打开 PopoverPanel
<template>
  <form :action="action" method="GET" class="flex-1">
    <Popover :open="searchResults.length > 0" class="relative w-full">
      <PopoverOverlay
        :class="`bg-black ${open ? 'fixed inset-0 opacity-10' : 'opacity-0'}`"
        @click="() => emptySearchResults()"
      />

      <div class="relative">
        <label for="search" class="sr-only">Search...</label>
        <input
          id="search"
          v-model="searchTerm"
          type="search"
          placeholder="Search..."
          class="h-10 w-full px-4 py-2 text-sm rounded-lg placeholder-gray-400 focus:outline-none"
        >
      </div>

      <PopoverPanel class="absolute top-full right-0 w-full mt-3 py-2 px-2 bg-gray-700 rounded-lg shadow-lg">
        <a
          v-for="result in searchResults"
          :key="result.id"
          :href="result.url"
          class="flex items-center font-semibold p-2 text-sm text-white leading-none rounded-lg hover:bg-gray-600"
        >
          <span class="mr-3 py-1 px-2 text-xs text-gray-900 leading-none bg-gray-300 rounded-full">
            {{ result.module }}
          </span>

          {{ result.title }}
        </a>
      </PopoverPanel>
    </Popover>
  </form>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Popover, PopoverPanel } from '@headlessui/vue';
import debounce from '@/Helpers/debounce';
import xhr from '@/Helpers/xhr';

const searchTerm = ref('');
const searchResults = ref([]);
const getSearchResults = debounce(async (value) => {
  if (value === '') return;

  const { data } = await xhr.post('search', { q: value });
  const { results } = await data;

  searchResults.value = results;
}, 250);
const emptySearchResults = () => {
  searchTerm.value = '';
  searchResults.value = [];
};

watch(searchTerm, (value) => getSearchResults(value));
</script>
4

0 回答 0