Vue 封装面包屑（即粘即用）

效果展示(后台管理系统中常用)

如果你也需要如图所示的效果直接把下面的代码粘贴过去即可
不需要父组件传递任何参数十分好用；

基本思路:
监听 $route 路由信息；
把当前的信息添加至数组，循环遍历数组
当前的active样式，也是根据当前的$route 里的path去决定的

代码写的很清楚了:

Tag

<template><div class="tag" v-if="showTags"><ul><li class="tags-li" v-for="(item,index) in list" :class="{'active': isActive(item.path)}" :key="index"><!--点击每个小按钮跳转相应路由--><router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link><span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span></li></ul><div class="handleTags"><el-dropdown @command="handleTags" size="mini" type="primary"><el-button type="primary">标签选项<i class="el-icon-arrow-down el-icon--right"></i></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item command="all">关闭所有</el-dropdown-item><el-dropdown-item command="other">关闭其他</el-dropdown-item></el-dropdown-menu></el-dropdown></div></div>
</template><script>export default {name: "Tag",data() {return {list: []}},computed: {// 显示隐藏面包屑showTags() {return this.list.length > 0;}},watch: {// 通过 监听路由的变化$route(newValue, oldValue) {this.setTages(newValue)}},methods: {// 选中状态  返回 true falseisActive(path) {return path === this.$route.fullPath;},// 标签选项 关闭单个 关闭所有handleTags(command) {command === 'all' ? this.closeAll() : this.closeOther()},// 点击关闭  单个 按钮closeTags(index) {const delItem = this.list.splice(index, 1)[0]; // 获取当前的const item = this.list[index] ? this.list[index] : this.list[index - 1]; // 获取到下一个if (item) { // 有下一个  跳到下一个delItem.path === this.$route.fullPath && this.$router.push(item.path);} else {  // 没有 去 home页面this.$router.push('/Home');}},// 点击关闭 所有closeAll() {this.list = [];this.$router.push('/Home');},// 点击关闭其他closeOther() {let currentList = this.list.filter((ele) => {return ele.path === this.$route.fullPath});this.list = currentList},// 展示的数组setTages(newValue) {const isExist = this.list.some(item => {return item.path === newValue.fullPath;});if (!isExist) {if (this.list.length >= 8) {this.list.shift();}this.list.push({title: newValue.meta.title,path: newValue.path,name: newValue.matched[1].components.default.name})}}}}
</script><style scoped lang="scss">.handleTags > > > .el-button {padding: 7px 0;font-size: 12px;}.tag {width: 100%;display: flex;justify-content: space-between;align-items: center;}.tags {position: relative;height: 30px;overflow: hidden;background: #fff;padding-right: 120px;box-shadow: 0 5px 10px #ddd;}.tags ul {box-sizing: border-box;width: 100%;height: 100%;}.tags-li {float: left;margin: 3px 5px 2px 3px;border-radius: 3px;font-size: 12px;overflow: hidden;cursor: pointer;height: 23px;line-height: 23px;border: 1px solid #e9eaec;background: skyblue;padding: 0 5px 0 12px;vertical-align: middle;color: #666;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;transition: all .3s ease-in;}.tags-li:not(.active):hover {background: #f8f8f8;}.tags-li.active {color: #fff;}.tags-li-title {float: left;max-width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-right: 5px;color: #666;}.tags-li.active .tags-li-title {color: #fff;}.tags-close-box {position: absolute;right: 0;top: 0;box-sizing: border-box;padding-top: 1px;text-align: center;width: 110px;height: 30px;background: #fff;box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);z-index: 10;}</style>

在父组件中引入配置即可使用

Vue 封装面包屑（即粘即用）相关推荐

在vue中使用element-ui二次封装面包屑导条
在vue中使用element-ui二次封装面包屑导条由于这几天写了一个后台管理系统,多次使用的到了面包屑导航,所以我就把它封装起来使用了: 效果图第一步安装element-ui npm i el ...
vue实战-面包屑的处理
vue实战-面包屑的处理 1.面包屑处理分类操作在Search路由模块下通过v-if来确定面包屑的存在,设置点击事件处理删除面包屑后的情况 <ul class="fl sui-ta ...
组件封装 - 面包屑组件
我们主要分为三个部分: 1. 初级的面包屑 2. 高阶的面包屑(过渡) 3. 高阶的面包屑(终极) 现在就来封装一个最简易的面包屑组件简易面包屑只能兼容两级, 如果说有两级以上的; 这样的面包屑组件 ...
vue 中面包屑带跳转的做法
首先要在子页面的meta中定义 {path: '/staffsManagement',component: () => import(/* webpackChunkName: "das ...
vue动态面包屑导航
说明:根据不同的页面动态生成不同的面包屑导航 (不用在每个页面写死面包屑) router.js路由文件: {path:'/index',name:'index',component:()=>im ...
Vue动态面包屑功能的实现方法
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...
vue动态面包屑导航的使用
动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template><el-breadcrumb class="app-breadcru ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...

Vue 封装面包屑（即粘即用）

效果展示(后台管理系统中常用)

Tag

Vue 封装面包屑（即粘即用）相关推荐

最新文章

热门文章

Vue 封装面包屑 （即粘即用）

效果展示(后台管理系统中常用)

Tag

Vue 封装面包屑 （即粘即用）相关推荐

最新文章

热门文章

Vue 封装面包屑（即粘即用）

Vue 封装面包屑（即粘即用）相关推荐