©2020-2024 ioDraw All rights reserved
标题说的“面包屑”是下图所示的小方块，可以方便的筛选用户需要的物品的各种属性。
利用vue设计出这种面包屑需要很多的请求
面包屑包括在主页全部商品分类点击的面包屑，输入关键字产生的面包屑，点击下方品牌产生的面包屑，还有点击售卖属性的面包屑。
带给服务器的参数
data(){ return{ //带给服务器的参数 searchParams:{ //一级分类id "category1Id": "",
//二级分类id "category2Id": "", //三级分类id "category3Id": "", //分类名字 "categoryName":
"", //关键词 "keyword": "", //排序 "order": "", //分页器，代表当前第几页 "pageNo": 1,
//代表一页展示多少数据 "pageSize": 5, //平台售卖属性 "props": [], //品牌 "trademark": "" } } }
各种面包屑的结构
<ul class="fl sui-tag"> <!-- 分类的面包屑 --> <li class="with-x" v-if
="searchParams.categoryName">{{searchParams.categoryName}}<i
@click="removeCategoryName">×</i></li> <!-- 关键字的面包屑 --> <li class="with-x" v-if
="searchParams.keyword">{{searchParams.keyword}}<i
@click="removeKeyword">×</i></li> <!-- 品牌的面包屑 --> <li class="with-x" v-if
="searchParams.trademark">{{searchParams.trademark.split(":")[1]}}<i
@click="removeTrademark">×</i></li> <!-- 平台的售卖的属性值展示 --> <li class="with-x"
v-for ="(attrValue,index) in searchParams.props" :key="index">{
{attrValue.split(":")[1]}}<i @click="removeAttr">×</i></li> </ul>
<!--selector--> <SearchSelector @trademarkInfo ="trademarkInfo"
@attrInfo="attrInfo"/>
当删除小面包屑的时候，也要把路由的路径改变，包括query参数和params参数
beforeMount(){ //复杂的写法 //点击关键词或者输入关键词就可以搜索到 // this.searchParams.category1Id
= this.$route.query.category1Id // this.searchParams.category2Id =
this.$route.query.category2Id // this.searchParams.category3Id =
this.$route.query.category3Id // this.searchParams.categoryName =
this.$route.query.categoryName // this.searchParams.keyword =
this.$route.params.keyword //Object.assign:ES6新增语法
Object.assign(this.searchParams,this.$route.query,this.$route.params) },
methods:{ //向服务器发请求获取search模块数据 getData(){
this.$store.dispatch('getSearchList',this.searchParams) }, //删除分类的名字面包屑
removeCategoryName(){ //只是把服务器的数据置空了，需要再发请求
//带给服务器参数说明可有可无的，如果这个属性值为空的字符串还是会把相应的字段带给服务器
//但是把相应的字段改为undefined，当前这个字段不会带给服务器 this.searchParams.categoryName=undefined
this.searchParams.category1Id=undefined this.searchParams.category2Id=undefined
this.searchParams.category3Id=undefined this.getData() //地址栏也需要修改:进行路由跳转
//严谨：本意是删除query，如果路径当中重新params参数，不应该删除 应该保留 if(this.$route.params){
this.$router.push({name:"search",params:this.$route.params}) } }, //删除关键字
removeKeyword(){ //给服务器带的参数searchparams的keyword置空 this.searchParams.keyword =
undefined //再次发请求 this.getData() //通知兄弟组件Header清除关键字 this.$bus.$emit("clear")
//进行路由跳转 if(this.$route.query){
this.$router.push({name:"search",query:this.$route.query}) } }, //品牌信息的自定义事件回调
trademarkInfo(trademark){ //1、整理品牌字段的参数 this.searchParams.trademark =
`${trademark.tmId}:${trademark.tmName}` //再次发请求获取search模块的数据 this.getData() },
//删除品牌的信息 removeTrademark(){ //将品牌的信息置空 this.searchParams.trademark = undefined
//再次发请求 this.getData() }, //收集平台属性地方回调函数---自定义事件 attrInfo(attr,attrValue){ let
props = `${attr.attrId}:${attrValue}:${attr.attrName}` //数组去重
if(this.searchParams.props.indexOf(props)==-1){
this.searchParams.props.push(props) } //再次发请求 this.getData() }, //删除售卖属性
removeAttr(index){ this.searchParams.props.splice(index,1) //再次发请求
this.getData() } }, //数据监听：监听组件是否发生变化，如果发生变化，再次发送请求 watch:{
//监听路由的信息是否发生变化，如果发生变化，再次发送请求 $route(newValue,oldValue){ //再次发送请求之前整理带给服务器的数据
Object.assign(this.searchParams,this.$route.query,this.$route.params)
//再次发送ajax请求 this.getData() //每次请求完毕，应该把相应的123级分类的id置空，让他接收新的id
this.searchParams.category1Id=undefined this.searchParams.category2Id=undefined
this.searchParams.category3Id=undefined } }
平台的售卖属性是子组件
<!-- 品牌地方 --> <ul class="logo-list"> <li v-for ="trademark in trademarkList"
:key="trademark.tmId" @click="tradeMarkHandler(trademark)">{
{trademark.tmName}}</li> </ul> </div> <div class="ext"> <a
href="javascript:void(0);" class="sui-btn">多选</a> <a
href="javascript:void(0);">更多</a> </div> </div> <!-- 平台售卖属性的地方 --> <div
class="type-wrap" v-for = "attr in attrsList" :key="attr.attrId"> <!--
平台售卖属性：比如说颜色 --> <div class="fl key">{{attr.attrName}}</div> <div class="fl
value"> <ul class="type-list"> <!-- 平台相应售卖的属性的属性值：粉色 。。。 --> <li
v-for="attrValue in attr.attrValueList" :key="attrValue"
@click="attrInfo(attr,attrValue)"> <a>{{attrValue}}</a> </li> </ul> </div> <div
class="fl ext"></div> </div>
请求 利用自定义事件
methods:{ //品牌的处理函数 tradeMarkHandler(trademark){ //点击了品牌
还是需要整理参数，向服务器发请求获取相应额数据进行展示 //在哪个组件发请求 //父组件
因为父组件的searchParams参数是带给服务器参数，子组件吧你点击的品牌的信息，需要给父组件传递过去----自定义事件
this.$emit('trademarkInfo',trademark) }, //平台售卖属性值得点击事件
attrInfo(attr,attrValue){ this.$emit("attrInfo",attr,attrValue) } }