vue3后台管理系统封装的普通搜索框组件

**Vue3 后台管理系统封装的普通搜索框组件**

在 Vue3 的项目中，一个常见的需求是实现一个普通的搜索框组件。这个组件通常会包含一个输入框、一个清除按钮和一个提交按钮。下面，我们将一步步地封装一个这样的组件。

### 组件结构首先，我们需要定义组件的结构。我们可以使用 Vue3 的 Composition API 来实现这一点。

javascript// SearchForm.vue<template>
 <div class="search-form">
 <!-- 输入框 -->
 <el-input v-model="searchValue" placeholder="请输入关键字" @input="handleInput"></el-input>

 <!-- 清除按钮 -->
 <el-button type="primary" icon="el-icon-close" @click="clearSearch">清空</el-button>

 <!-- 提交按钮 -->
 <el-button type="primary" @click="submitSearch">搜索</el-button>
 </div>
</template>

<script>
export default {
 name: 'SearchForm',
 data() {
 return {
 searchValue: '', // 搜索值 }
 },
 methods: {
 handleInput(val) {
 this.searchValue = val;
 },
 clearSearch() {
 this.searchValue = '';
 },
 submitSearch() {
 console.log('搜索值:', this.searchValue);
 // todo: 提交搜索逻辑 }
 }
}
</script>

<style scoped>
.search-form {
 display: flex;
 align-items: center;
 padding:10px;
 border-bottom:1px solid #ccc;
}

.el-input {
 width:300px;
 margin-right:20px;
}
</style>

javascript// main.jsimport { createApp } from 'vue'
import App from './App.vue'
import SearchForm from './SearchForm.vue'

createApp(App).use(SearchForm).mount('#app')

javascript// App.vue<template>
 <div class="app">
 <!-- 使用 SearchForm 组件 -->
 <search-form></search-form>
 </div>
</template>

<script>
export default {
 name: 'App',
}
</script>

<style scoped>
.app {
 padding:20px;
}
</style>