LQMDRetrieval/web/src/components/SearchBar.vue

<template>
  <div class="search-bar">
    <el-input
      v-model="keyword"
      placeholder="请输入关键词进行搜索"
      size="large"
      clearable
      @keyup.enter="handleSearch"
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const keyword = ref('')
const emit = defineEmits<{ search: [keyword: string] }>()

function handleSearch() {
  emit('search', keyword.value)
}
</script>

<style scoped>
.search-bar {
  max-width: 700px;
  margin: 0 auto;
}
</style>