ele-h5项目使用vue3+vite开发:第四节、业务组件-SearchView组件开发

需求分析

  • 展示切换动画
  • 搜索框输入文字,自动发送请求
  • 搜索结果展示
  • 搜索状态维护
  • 历史搜索展示,点击历史搜索后发送请求
  • 历史搜索更多切换动画
  • 效果
  • ele-h5项目使用vue3+vite开发:第四节、业务组件-SearchView组件开发_第1张图片





使用 实现动画效果

使用

  • 组件中,你可以使用name属性来指定动画的类名,在CSS中定义类名,并为其添加过渡效果





  • 
    
    


Search 组件复用

  • 将之前章节写好的OpSearch组件复用到SearchView组件中
  • 
    
    

 computed 计算属性

理解

  • 方便地计算和监听数据的变化。

使用
axios实例发送业务请求

  • 开发环境配置反向代理使用服务接口
  • ele-h5项目使用vue3+vite开发:第四节、业务组件-SearchView组件开发_第2张图片
  • 设置请求响应拦截
  • ele-h5项目使用vue3+vite开发:第四节、业务组件-SearchView组件开发_第3张图片
  • 创建具体功能请求函数
  • ele-h5项目使用vue3+vite开发:第四节、业务组件-SearchView组件开发_第4张图片
  • 调用功能请求函数
  • ele-h5项目使用vue3+vite开发:第四节、业务组件-SearchView组件开发_第5张图片


mock 请求:

看这篇文章 使用apifox创建一个Mock Server Api 接口-CSDN博客

你可能感兴趣的:(项目开发,vue3,前端)