通用vue组件化搜索组件页面

以下是一个简化的Vue搜索组件示例，它可以作为一个通用的搜索组件模板。

<template>
  <div class="search-component">
    <input
      v-model="searchQuery"
      type="text"
      placeholder="请输入搜索内容"
      @keyup.enter="handleSearch"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '',
    };
  },
  methods: {
    handleSearch() {
      // 执行搜索操作
      console.log('搜索内容:', this.searchQuery);
      // 可以在这里调用外部定义的方法或进行路由跳转等
      // this.$emit('search', this.searchQuery); // 如果需要，可以触发一个事件
    },
  },
};
</script>
 
<style scoped>
.search-component {
  display: flex;
  align-items: center;
}
 
input {
  margin-right: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  outline: none;
}
 
button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
 
button:hover {
  background-color: #0056b3;
}
</style>

这个组件包含一个输入框和一个按钮，用户可以在输入框中输入搜索内容，并且在按下按钮或者按下回车键时触发搜索操作。组件内部通过一个名为searchQuery的数据属性来管理输入的内容，并提供了一个方法handleSearch来处理搜索逻辑。同时，它有一个scoped样式用于保持样式只应用于当前组件，避免影响到其他组件或页面的全局样式。