前端使用vue3+vite写出一个实用好看的搜索框，该搜索框实现了鼠标单击聚焦功能

以下是一个简单的搜索框组件，使用了Vue3和Vite，实现了鼠标单击聚焦的效果：

<template>
  <div class="search-box">
    <input type="text" v-model="query" @focus="isFocused = true" @blur="isFocused = false">
    <button :class="{ 'focused': isFocused }" @click="search">Search</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // 使用 reactive 函数创建一个响应式对象
    const state = reactive({
      query: '',
      isFocused: false,
    });

    const search = () => {
      // 根据输入框中的内容进行搜索
      console.log(`Search for: ${state.query}`);
    };

    return {
      ...state,
      search,
    };
  },
};
</script>

<style scoped>
.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

input[type="text"] {
  border: none;
  outline: none;
  flex-grow: 1;
}

button {
  border: none;
  outline: none;
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

button.focused {
  background-color: #0056b3;
}
</style>

这个搜索框组件中，使用了 `reactive` 函数创建了一个响应式对象，包含了输入框中的文本内容和搜索按钮的聚焦状态。通过 `@focus` 和 `@blur` 事件，可以在输入框聚焦和失焦时改变聚焦状态。在搜索按钮被单击时，会根据输入框中的内容进行搜索，这里只是简单地打印出搜索的内容。CSS 样式中，使用了 `scoped` 关键字来限定样式作用域，保证了组件内样式不会影响到其他组件。