vue 搜索框

### 创建和自定义 Vue.js 中的搜索框组件 在 Vue.js 应用程序中创建和自定义搜索框组件涉及多个方面，包括但不限于模板设计、样式调整以及逻辑处理。 #### 定义搜索框组件 为了构建一个功能齐全的搜索框组件，在 `src/components` 目录下新建名为 `SearchBox.vue` 的文件[^3]： ```html <template> <div class="search-box"> <input type="text" v-model="query" @keyup.enter="handleSearch"/> <button @click="handleSearch">搜索</button> </div> </template> <script setup> import { ref } from 'vue'; const query = ref(''); function handleSearch() { console.log('执行搜索:', query.value); } </script> <style scoped> .search-box input, .search-box button { padding: .5em; } .search-box input { width: calc(100% - 80px); /* 预留按钮宽度 */ margin-right: 10px; } </style> ``` 此代码片段展示了如何利用 `<script setup>` 来简化脚本编写方式，并通过组合 API 实现双向绑定 (`v-model`) 和事件监听(`@keyup.enter`, `@click`). 同时也包含了基本样式的设置来美化输入框及其关联的操作按钮[^4]. #### 使用搜索框组件 完成上述工作之后，就可以像其他任何标准 HTML 元素一样轻松地将新创建好的 `SearchBox` 插入到页面布局之中。只需确保已将其导入至目标视图或者全局注册以便于在整个应用范围内重复调用即可. 例如，在某个 `.vue` 文件内的 `<template>` 标签里添加如下行: ```html <SearchBox /> ``` 并且记得先引入该组件： ```javascript // 如果是在单个文件内部局部使用的话... import SearchBox from './components/SearchBox.vue'; export default { components: { SearchBox } }; ``` 或是作为全局组件提前声明好： ```javascript app.component('SearchBox', require('./components/SearchBox.vue').default); ``` 这样就完成了从无到有的整个流程——不仅实现了基础的功能需求，还兼顾到了用户体验层面的设计考量[^1].