uniapp写一个搜索框
时间: 2023-12-25 09:03:10 浏览: 20
以下是一个简单的uniapp搜索框实现示例:
```html
<template>
<div class="search-box">
<input type="text" class="search-input" placeholder="请输入关键字" v-model="keyword" @input="handleInput">
<button class="search-btn" @click="handleSearch">搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
keyword: ''
}
},
methods: {
handleInput(e) {
this.keyword = e.target.value
},
handleSearch() {
console.log('search keyword:', this.keyword)
// 进行搜索操作
}
}
}
</script>
<style scoped>
.search-box {
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.search-input {
flex: 1;
height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
}
.search-btn {
width: 80px;
height: 40px;
margin-left: 10px;
border: none;
border-radius: 20px;
background-color: #42b983;
color: #fff;
cursor: pointer;
outline: none;
}
</style>
```
这个搜索框包括一个文本框和一个搜索按钮,用户可以在文本框中输入关键字进行搜索。在点击搜索按钮时,会触发`handleSearch`方法,这里只是简单地输出关键字到控制台,实际应用中需要根据关键字进行搜索操作。`handleInput`方法用于双向绑定输入框的值,当用户输入时会自动更新`keyword`的值。样式部分使用了flex布局和一些基本样式样式,可以根据自己的需要进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)