帮我用vue 和css写一个通讯录的搜索框

好的，下面是一个简单的通讯录搜索框的 Vue 组件示例：

<template>
  <div class="search-box">
    <input
      type="text"
      class="search-input"
      placeholder="输入姓名或电话号码"
      v-model="query"
      @input="handleInput"
    />
    <button class="search-btn" @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '', // 搜索关键字
    };
  },
  methods: {
    handleInput() {
      // 输入框内容变化时触发
      // 可以在这里对输入内容进行处理
    },
    handleSearch() {
      // 点击搜索按钮时触发
      // 可以在这里发送搜索请求
      // 搜索结果可以通过父组件的事件监听获取
      this.$emit('search', this.query);
    },
  },
};
</script>

<style scoped>
.search-box {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.search-btn:hover {
  background-color: #0069d9;
}
</style>

这个组件包含一个文本输入框和一个搜索按钮，用户可以通过输入关键字然后点击搜索按钮进行搜索。在输入框内容发生变化时，组件会触发 `handleInput` 方法，你可以在这里对输入内容进行处理；在点击搜索按钮时，组件会触发 `handleSearch` 方法，你可以在这里发送搜索请求并将搜索结果通过 `this.$emit('search', this.query)` 发送给父组件。

该组件使用了一些简单的 CSS 样式来美化搜索框和搜索按钮的样式，你可以根据自己的需要进行修改。同时，为了避免样式冲突，我们使用了 `scoped` 选项来限定样式的作用范围。