Vue项目--Search组件的开发

最新推荐文章于 2024-08-17 09:03:20 发布
最新推荐文章于 2024-08-17 09:03:20 发布
阅读量902 收藏 1
点赞数
分类专栏： VUE项目 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/122245659
版权
本文介绍了在Vue项目中开发Search组件的过程，包括将selector抽象为SearchSelector组件，使用POST请求获取数据，处理路由参数变化，以及面包屑功能的实现。特别地，讨论了在搜索时如何处理路由信息，确保数据的正确更新和减少不必要的网络请求。同时，文章还涉及了面包屑的删除操作及其对路由的影响。
摘要由CSDN通过智能技术生成

1.将selector抽象成SearchSelector组件，以及进相关api的配置，数据的拉去分别在各自组件内部

 

 

2. 此次数据的请求需要用到post方式，会用到一个对象参数，将对象参数写在Search.vue的data中，挂载时进行数据的拉取

 

3. 当已经处于search页面，只是改变路由参数信息时，路由不会跳转，需进行处理

当改变搜索框内容，再点搜索按钮， 路由信息会发生变化，所以通过监听路由信息可以完成路由跳转。

注意此时category1Id、category2Id、category3Id由于每次请求只会给其中一个赋值，这也就表示如下上次请求和这次请求的级别不同，上次请求的数据就会保留。所以这里要手动赋空值，而赋值undefined而不是空字符串是因为

最低0.47元/天 解锁文章
七彩冰淇淋与藕汤
关注
专栏目录
Vue —— Search搜索组件
weixin_54966486的博客
03-28 5713
步骤 拆分静态组件（略） 写 Api 接口 api/request.js //对 axios 进行二次封装 import axios from "axios"; //引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法 import nprogress from 'nprogress'; import "nprogress/nprogress.css" //1.利用axios对象的create,去创建一个axios实例 //2.
vue电商项目(三)——开发search页面
a_bowl_rice的博客
12-23 1021
search组件部分
vue-search:Vue简易搜索框
05-18
虚拟搜索 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vue3列表页搜索条件封装
最新发布
yan1915766026的博客
08-17 634
vue3搜索栏封装，简单、统一、易于维护
vue-search-select-可搜索的选择组件和语义UI的下拉列表兼容。-Vue.js开发
05-27
vue-search-select一个没有依赖性的Vue.js搜索选择组件。 从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js vue-search-select一个Vue.js搜索选择组件，没有依赖项。 从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js 2.x五种选择组件ModelSelect（从v2.3.8起）通过v-model设置的值可以是字符串，数字，布尔值和对象如果v模型的类型为string，则onInput由string设置。 （不是选项对象）通过v-model设置的ModelListSelect（来自v2.3.8）可以将自定义列表和自定义显示文本传递给Component Wrap ModelSelect co
Vue —— Search 组件面包屑
weixin_54966486的博客
03-29 738
步骤 Search 组件 <template> <div> <!-- 商品分类三级列表 --> <typeNav /> <div class="main"> <div class="py-container"> <!--bread ：面包屑，带有 x 的结构的--> <div class="bread"> &.
vue-search-panel-用于搜索建议的Vue组件-Vue.js开发
05-27
简体中文vue-search-panel是一个具有建议功能的搜索组件。目录功能示例安装用法API参考功能vue-search-panel英文|英文 简体中文vue-search-panel是一个带有建议的搜索组件内容功能示例安装用法API参考功能根据输入...
vue-iview-tableSearch:一个适用于iview的vue表格搜索组件，支持下拉选择指定列进行搜索
05-13
1. **组件封装**：`vue-iview-tableSearch`是对Iview Table组件的扩展，它将搜索功能封装为一个新的组件，可以方便地与其他Vue项目集成，通过props传递配置，实现搜索功能。 2. **属性与事件**：组件通常会提供一...
vue移动端自适应搜索框组件(带历史搜索功能)
weixin_45055355的博客
01-04 600
vue移动端自适应搜索框(带历史搜索功能)
Vue 折腾记 - (5) 写一个不大靠谱的selectSearch组件
weixin_33872566的博客
07-22 310
前言 这个功能在网站中也很常见;下拉选择带搜索 基于之前的typeahead组件的基础上完善, 把过滤计算放在了computed ,其他逻辑也有所优化,代码更好理解 效果图 实现逻辑 和typeahead的实现大同小异,就是选择和传递数据的细节有所改善和重置默认值的思路有所变动 indexOf的比对稍微加强了,字母默认全部小写,还有输入的值去除空格 整体来说比typeahead组件更好理解...
VUE项目--Search组件
weixin_45609659的博客
02-23 2079
一、拆分组件 二、写api，获取后台数据 // 获取搜索模块数据 地址：/api/list 请求方式：post 参数：需要带参数 // 当前接口（获取搜索模块数据），给服务器传递一个默认参数【至少是一个空对象】 export const reqGetSearchInfo = (params) => requests({ url: "/list", method: "post", data: params }) 三、Vuex存储数据，模块化管理 import { reqG
vue实战-Search模块开发(大体步骤)
bying666的博客
09-26 624
②传递的参数也要传给服务器用于筛选，不能只是空对象，可以在data中设置需要传递的值，将路由传递的参数动态的传递到data中的对象中，然后再发送给服务器，服务器返回符合的数据入仓库。于是需要在挂载调用派发actions时，就得将data中的对象确定好，可以用在生命周期mounted之前的beforeMount，或者beforeCreate。，当再次传参发请求时，不能再派发action改变仓库的值，这不符合搜索模块的特性，在接口统一管理的index.js中添加搜索模块的接口。获取计算属性得到的值用数组表示。
vue_music：搜索search.vue
weixin_33759269的博客
12-13 134
1. 经典搜索框search-box.vue 通用组件的设计原则：解耦 1. 通过props，传递placeholder信息 props: { placeholder: { type: String, default: '搜索歌曲、歌手' } }, 2. 派发输入框中的输入值query c...
搜索功能vue
七月❤的博客
03-12 441
<!-- 搜索页面 --> <template> <div> <div> <el-input v-model="search" placeholder="请输入内容"></el-input> <el-button type="primary" @click="Search">搜索</el-button> </div> <!-- 搜索后的 --.
Vue-Search-Select：智能与高效的前端筛选组件
gitblog_00032的博客
04-26 678
Vue-Search-Select：智能与高效的前端筛选组件 vue-search-selectA Vue.js search select component项目地址:https://gitcode.com/gh_mirrors/vu/vue-search-select 是一个基于 Vue.js 的强大选择器组件，适用于需要进行模糊搜索和筛选功能的网页应用。它将简单的下拉列表与高效搜索引擎相结...
012_Vue音乐播放器（search.vue 搜索 组件）
友人C君的博客
11-22 440
首先是 酷狗搜索的API 请求，在proxyTable中 代理 该地址 在请求API的js文件中，有搜索热门词请求，搜索词条请求 import axios from 'axios'; let commonParams = { inCharset: 'utf-8', outCharset: 'utf-8' } export function getKugouHotKeyword...
vue框架中search搜索功能的实现
tan_xiao_tan的博客
02-01 4254
``watch监视属性方法: watch:{ keyword(){ //用到了节流函数 进行判断这个值（数据是否存在），监听的是keyword值的变化， if(this.timer){ clearTimeout(this.timer) } if(!this.keyword){//如果搜索的内容不存在，则返回一个空数组 this.list=[] return } this.timer = setTimeout(()=>{ const result = [] for (let i in this.citi
Vue中详解vue-amap组件的集成与搜索盒使用
总结来说，本文档主要涉及Vue开发中的地图集成，包括vue-amap组件的安装、配置以及如何在Vue组件间通过事件总线进行通信，确保地图功能的正常工作和数据驱动的用户界面交互。这对于理解和使用Vue框架与高德地图的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值