SearchBox.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <script setup lang="ts">
  2. import { message, type SelectProps } from "ant-design-vue";
  3. import { ref } from "vue";
  4. const props = defineProps({
  5. keyword: {
  6. type: String,
  7. required: true,
  8. },
  9. field: {
  10. type: String,
  11. required: true,
  12. },
  13. placeholder: {
  14. type: String,
  15. required: true,
  16. }
  17. });
  18. const emits = defineEmits<{
  19. (e: "search", field: string, keyword: string): void;
  20. (e: "update:keyword", keyword: string): void;
  21. (e: "update:field", field: string): void;
  22. }>();
  23. // 搜索框字段选择项列表
  24. const fieldOptions = ref<SelectProps['options']>([
  25. { value: 'TP', label: '主题', },
  26. { value: 'TI', label: '标题', },
  27. { value: 'AU', label: '作者', },
  28. { value: 'KW', label: '关键词', },
  29. { value: 'AB', label: '摘要' },
  30. { value: 'UN', label: '机构' },
  31. ]);
  32. function onSearch() {
  33. const kwd = props.keyword.trim();
  34. if (kwd.length == 0) {
  35. message.warning("请输入查询关键词");
  36. return;
  37. }
  38. emits("search", props.field, props.keyword);
  39. }
  40. function onKeywordChange(e: InputEvent) {
  41. emits("update:keyword", (e.target as HTMLInputElement).value);
  42. }
  43. function onFieldChange(value: string) {
  44. emits("update:field", value);
  45. }
  46. </script>
  47. <template>
  48. <a-row type="flex">
  49. <a-col>
  50. <a-select
  51. ref="select"
  52. :value="field"
  53. style="width: 120px"
  54. :options="fieldOptions"
  55. @change="onFieldChange"
  56. size="large"
  57. ></a-select>
  58. </a-col>
  59. <a-col flex="1">
  60. <a-input-search
  61. :value="keyword"
  62. :placeholder="placeholder"
  63. enter-button
  64. size="large"
  65. @change="onKeywordChange"
  66. @search="onSearch"
  67. />
  68. </a-col>
  69. </a-row>
  70. </template>