Vue移动端

文章搜索功能

头部搜索框使用vant 中的搜索框组件

<form action="/">
  <van-search  v-model="value" show-action placeholder="请输入搜索关键词"
    @search="onSearch" @cancel="onCancel" />
</form>
<!-- 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 -->
<!-- search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发 -->

因业务需求, 分别创建 搜索结果 、联想建议 、搜索历史 三个组件

设置一个变量, 变量为真则显示 搜索结果 组件

变量为假, 当搜索框有值时, 显示 联想建议 组件, 无值, 显示 搜索历史 组件

联想建议功能

给父组件注册一个自定义事件, 当父组件中的搜索框输入值时, 将内容传给子组件, 子组件用 props 来接收, 再使用 watch 来监听传来的搜索框值的变化

封装联想的数据请求, 定义一个异步函数来调用该请求, 将函数放入 watch 中, 一旦数据改变,就会发送请求,获取新的联想数据

// 因为该组件是通过判断搜索框的值来调用的, 所以输入第一个值,不会触发请求, 需要设置immediate: true , 页面初始化时立即执行

// 为了防止频繁发生请求, 可以在调用该函数时加一个定时器来实现防抖功能

防抖 推荐使