ReferenceSearchBox.vue 906 B

123456789101112131415161718192021222324252627282930313233343536
  1. <script setup lang="ts">
  2. import { ref } from "vue";
  3. const keyword = ref('');
  4. const emits = defineEmits<{
  5. (e: "search", keyword: string[]): void;
  6. (e: "searchWithIn", keyword: string[]): void;
  7. }>();
  8. function getKeywords(keyword: string) {
  9. return keyword.split(' ').filter((item) => item.trim() != "")
  10. }
  11. function onSearch() {
  12. emits("search", getKeywords(keyword.value));
  13. }
  14. function onSearchWithIn() {
  15. emits("searchWithIn", getKeywords(keyword.value));
  16. }
  17. </script>
  18. <template>
  19. <a-row type="flex" :gutter="8">
  20. <a-col flex="1">
  21. <a-input v-model:value="keyword" placeholder="请输入查询词进行检索,使用空格区分多个查询词" />
  22. </a-col>
  23. <a-col>
  24. <a-space>
  25. <a-button type="primary" @click="onSearch">重新检索</a-button>
  26. <a-button @click="onSearchWithIn">在结果中检索</a-button>
  27. </a-space>
  28. </a-col>
  29. </a-row>
  30. </template>