vue实战-面包屑的处理

1.面包屑处理分类操作

在Search路由模块下
通过v-if来确定面包屑的存在，设置点击事件处理删除面包屑后的情况

<ul class="fl sui-tag"><li class="with-x" v-if="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeCategoryName">×</i></li>
</ul>

点击事件方法

   removeCategoryName(){//点击x的时候将searchParams中的categoryName的值清空,//由于name清空了，可是它的id还在，所以也需要将它的id给清空//为了给仓库减负，就是不输出空的暂时用不上的属性值，不将这些值变为空字符而是undefined，//这样就不会返回数据到仓库中了。this.searchParams.categoryName = undefinedthis.searchParams.category1Id = undefinedthis.searchParams.category2Id = undefinedthis.searchParams.category3Id = undefined//并且重新派发告诉服务器数据变化this.getData()//更新数据后，路由跳转也需要更改//这里指右边三级联动的query需要删除，而如果存在parama参数需要保留if(this.$route.params){this.$router.push({name:'search',params:this.$route.params})}}

2.面包屑中的关键字处理

组件通信：
1.props：父子
2.自定义事件：子父
3.vuex：仓库数据，万能
4.插槽：父子
5.pubsub-js：万能
6.$bus:全局事件总线

同样在Search路由模块下
通过v-if来确定面包屑的存在，设置点击事件处理删除面包屑后的情况

 <!-- 搜索关键字面包屑 -->
<li class="with-x" v-if="searchParams.keyword">{{searchParams.keyword}}<i @click="removeKeyword">×</i></li>

点击事件的方法

removeKeyword(){//与处理分类操作相同this.searchParams.keyword = undefinedthis.getData()//但是这样是Search组件中的keyword为undefined了，可是Header组件中的keyword还是存在//所以需要将Header中的keyword的值也清空。//Search与Header组件之间是兄弟组件,使用全局事件总线$bus来传递。//去$bus中获取触发Header组件绑定的事件this.$bus.$emit('clear')//同样的，由于点击删除面包屑路由跳转要恢复，要考虑到三级分类的query参数存在时//应该保留if(this.$route.query){this.$router.push({name:'search',query:this.$route.query})}}

Header组件模块中的绑定事件

  mounted(){this.$bus.$on('clear',()=>{this.keyword = ''})}

注册全局事件总线

成功的实现了面包屑中关键字的处理，Header组件与Search组件中的keyword都因为面包屑的删除而清空。

3.平台售卖属性的操作

在Search组件下添加售卖属性的面包屑

<!-- 销售属性的面包屑 -->
<li class="with-x" v-for="(attv,index) in (searchParams.props)" :key="index">{{attv.split(':')[1]}}<i @click="removeprops(index)">×</i></li>

通过自定义事件（子传父）传递数据

父组件下绑定自定义事件

处理从子组件传递过来的数据

   attrInfo(attr,attv){let props = `${attr.attrId}:${attv}:${attr.attrName}`if(this.searchParams.props.indexOf(props)){this.searchParams.props.push(props)}this.getData()},

子组件触发事件并传递数据

 attrInfo(attr,attv){this.$emit('attrInfo', attr,attv)}

删除面包屑操作

绑定点击事件方法，因为props是数组，需要splice方法来删除元素。

removeprops(index){this.searchParams.props.splice(index,1)this.getData()}

vue实战-面包屑的处理相关推荐

vue 中面包屑带跳转的做法
首先要在子页面的meta中定义 {path: '/staffsManagement',component: () => import(/* webpackChunkName: "das ...
vue动态面包屑导航
说明:根据不同的页面动态生成不同的面包屑导航 (不用在每个页面写死面包屑) router.js路由文件: {path:'/index',name:'index',component:()=>im ...
Vue动态面包屑功能的实现方法
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...
Vue 封装面包屑（即粘即用）
效果展示(后台管理系统中常用) 如果你也需要如图所示的效果直接把下面的代码粘贴过去即可不需要父组件传递任何参数十分好用: 基本思路: 监听 $route 路由信息: 把当前的信息添加至数组,循环 ...
vue动态面包屑导航的使用
动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template><el-breadcrumb class="app-breadcru ...
在vue中使用element-ui二次封装面包屑导条
在vue中使用element-ui二次封装面包屑导条由于这几天写了一个后台管理系统,多次使用的到了面包屑导航,所以我就把它封装起来使用了: 效果图第一步安装element-ui npm i el ...
vue + Element UI 动态Breadcrumb 面包屑的制作
文章目录效果一.路由配置二.使用步骤 1.Breadcrumb.vue: 2.在页面中使用总结效果面包屑用于显示当前页面的路径,快速返回之前的任意页面. 一.路由配置代码如下: impo ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
Vue+Element项目实战系列-动态面包屑
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...

vue实战-面包屑的处理

vue实战-面包屑的处理

1.面包屑处理分类操作

2.面包屑中的关键字处理

3.平台售卖属性的操作

在Search组件下添加售卖属性的面包屑

通过自定义事件（子传父）传递数据

删除面包屑操作

vue实战-面包屑的处理相关推荐

最新文章

热门文章