Vue实现简单通用面包屑

迷南。 2022-10-10 12:54 164阅读 0赞

> 注意：
> 
> 1.  依赖 elementUi的 el-tooltip组件,如不需要， 去掉 el-tooltip标签即可。
> 2.  依赖 node-sass编译环境。
> 3.  最终实现效果在文章底部。

HTML部分：

<template>
      <div class="topbar">
        <div v-for="(item,index) in routerList" :key="index" >
            <el-tooltip class="item" effect="dark" :content="item.title" placement="bottom">
              <div class="topbar-item" @click="handleRoute(item.path, index)" :class="[{ 'active': item.active == true}]">
                    {
       {item.title | fil3Str}}
                <div class="topbar-close" @click.stop="handleDelete(item.index)">✕</div>
              </div>
            </el-tooltip>
        </div>
      </div>
    </template>

js部分：

export default { 
      data() { 
        return { 
          routerList: [],
        };
      },
      filters:{ 
        fil3Str(val){ 
          if(val){ 
            if(val.length > 3){ 
              return val.slice(0, 3) + '..'
            }
            else{ 
              return val
            }
          }
        }
      },
      watch:{ 
        $route(nVal, oVal){ 
          if(nVal.fullPath == '/'){ 
            this.removeAvtive()
            this.routerList[0].active = true 
            return
          }
          if(this.routerList.length > 18) return
          this.removeAvtive()
          for(let i=0; i<this.routerList.length; i++){ 
            if(this.routerList[i].path == nVal.fullPath){ 
                this.routerList[i].active = true
                return
            }
          }
          this.routerList.push(
            { 
              title: nVal.meta.title,
              path: nVal.fullPath,
              index: this.routerList.length,
              active: true
            }
          )
        }
      },
      methods: { 
        // 路由跳转
        handleRoute(path, index){ 
          this.$router.push({ path: path})
          this.removeAvtive()
          this.routerList[index].active = true
        },
    
        // 删除当前route tag
        handleDelete(index) { 
          if(this.routerList.length <= 1){ 
            this.routerList = []
            return
          }
          if(this.routerList[index].path == this.$route.path){ 
            this.routerList = this.remove(this.routerList, index)
            this.$router.push({ path: this.routerList[this.routerList.length - 1].path})
            return
          }
          this.routerList = this.remove(this.routerList, index)
          for(let i=0; i<this.routerList.length; i++){ 
            this.routerList[i].index = i
          }
        },
    
        // 去重
        remove(arr, index) { 
          let result = []
          for(let i=0; i<arr.length; i++){ 
            if(arr[i].index != index){ 
              result.push(arr[i])
            }
          }
          return result
        },
    
        removeAvtive(){ 
          for(let i=0; i<this.routerList.length; i++){ 
            this.routerList[i].active = false
          }
        }
      },
    },
    mounted(){ 
        this.routerList.push(
          { 
            title: this.$route.meta.title,
            path: this.$route.fullPath,
            index: this.routerList.length,
            active: true
          }
        )
    }

CSS部分，注意，这里style标签有 `lang="scss" scope` 属性：

$green: #4caf50; .topbar{ 
        display: flex;
        align-items: center;
        height: 65px;
        width: 100%;
        padding-left: 20px;
        background: #fff !important;
        border-bottom: 2px solid rgba($color: #000000, $alpha: .1); &-item{ 
          position: relative;
          width: 80px;
          height: 32px;
          line-height: 30px;
          margin: 3px;
          font-size: 13px;
          transition: all .8s;
          text-indent: 5px;
          color: #222f3e;
          display: inline-block;
          padding: 0 10px;
          border-style: solid;
          border-color: #dbefdc;
          border-width: 1px;
          border-radius: 4px;
          box-sizing: border-box;
          white-space: nowrap; &:hover{ 
            cursor: pointer;
            border-color: $green;
            color: $green;
          }
        }
        &-close{ 
          position: absolute;
          top: 0px;
          right: 5px;
        }
      }
      .active{ 
        background: $green !important;
        color: #fff !important;
      }

最终效果如下：  
![在这里插入图片描述][20210628164109181.png]

[20210628164109181.png]: /images/20221005/5a715b7c9af347c7b0a0874f3f5bff70.png