1
. 创建搜索框组件
首先，我们需要创建一个搜索框组件，可以使用Element UI中的Input组件来实现，同时为了实现搜索框的动态特效，我们需要使用
Vue的watch属性来监听搜索框的value值的变化。
```html
<template>
<el-input v-model="value" placeholder="请输入搜索内容" @keyup
.enter="handleSearch"></el-input>
</template>
<script>
export default {
data() {
return {
value: &
#39;&
#39;
}
},
watch: {
value(val) {
this
.$emit(&
#39;search&
#39;, val)
}
},
methods: {
handleSearch() {
this
.$emit(&
#39;search&
#39;, this
.value)
}
}
}
</script>
```
在上面的代码中，我们使用了Element UI中的Input组件，同时定义了value属性来存储搜索框的值。并且使用了watch属性来监听value值的变化，并且在value值发生变化时，触发search事件向父组件发送搜索请求。同时，在搜索框的enter键被按下时，也会触发handleSearch方法，向父组件发送搜索请求。
2. 创建搜索结果组件
接下来，我们需要创建一个搜索结果组件，用于展示搜索结果。在此，我们将使用Element UI中的Table组件来实现搜索结果的展示，同时也需要使用
Vue的props属性来接收父组件传递过来的搜索结果数据。
```html
<template>
<el-table :data="searchResult">
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
</el-table>
</template>
<script>
export default {
props: {
searchResult: {
type: Array,
default: () => []
}
}
}
</script>
```
在上面的代码中，我们使用了Element UI中的Table组件，并且使用了props属性来接收父组件传递过来的searchResult数据（即搜索结果数据）。同时，我们也定义了搜索结果的列名和列属性，以及使用了默认值来避免在没有搜索结果时出现错误。
3
. 实现父组件
最后，我们需要在父组件中将搜索框和搜索结果组件组合起来，并且实现搜索功能。在此，我们可以使用
Vue的computed属性来实现搜索功能，同时也需要使用
Vue的methods属性来处理搜索请求，最终将搜索结果数据传递给搜索结果组件。
```html
<template>
<div>
<search-box @search="handleSearch"></search-box>
<search-result :search-result="searchResult"></search-result>
</div>
</template>
<script>
import SearchBox from &
#39;
./SearchBox&
#39;
import SearchResult from &
#39;
./SearchResult&
#39;
export default {
components: {
SearchBox,
SearchResult
},
data() {
return {
data: [
{ id: 1, name: &
#39;iPhone 1
2&
#39;, price: 5999 },
{ id:
2, name: &
#39;
华为Mate 4
0&
#39;, price: 4999 },
{ id: 3, name: &
#39;三星Galaxy S
21&
#39;, price: 5399 },
{ id: 4, name: &
#39;小米11&
#39;, price: 3999 },
{ id: 5, name: &
#39;OPPO Reno4 Pro&
#39;, price: 3799 }
],
searchResult: []
}
},
computed: {
filteredData() {
const keyword = this
.keyword
.trim()
.toLowerCase()
if (keyword === &
#39;&
#39;) {
return []
} else {
return this
.data
.filter(item => item
.name
.toLowerCase()
.indexOf(keyword) !== -1)
}
}
},
methods: {
handleSearch(keyword) {
this
.keyword = keyword
this
.searchResult = this
.filteredData
}
}
}
</script>
```
在上面的代码中，我们首先引入了搜索框和搜索结果组件，并且定义了data数据来存储所有商品数据。同时，我们也定义了searchResult数据来存储搜索结果数据。在computed属性中，我们使用了filteredData方法来根据关键词搜索匹配的商品数据，如果关键词为空，则返回空数组。在methods属性中，我们定义了handleSearch方法来处理搜索请求，并且将搜索结果数据赋值给searchResult数据。
最后，我们将搜索框和搜索结果组件组合起来，并且将searchResult数据传递给搜索结果组件，实现了动态搜索引擎的功能。
本文介绍了解决华为手机内置浏览器因内核版本过低导致的兼容性问题的两种方法：一是通过安装并配置babel-polyfill；二是直接引入cdn资源。
扫一扫
2560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
