后台头部导航标签（添加+删除+左右滑动，用了element ui标签）

 

用的element ui标签，以下代码可以直接复制来用的。（很简单，照着步骤来就行）。 

1.利用vuex，添加+删除，点击生成的标签。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    visitedView:[
      {
        name: "Data",
        fullPath: "/data/view", 
        path: "/data/view",
        meta:{title:'用户统计'}, 
        query: '', 
      }
    ],
  },
  getters: {
  },
  mutations: {
    //添加用户访问过的页面
    addVisitedView(state,view){
      if(state.visitedView.some(v=>v.path===view.path)) return
      state.visitedView.push(view)
    },
    //关闭用户访问过的页面
    delVisitedView(state,view){
      for (const [i, v] of state.visitedView.entries()) {
        if (v.path === view.path) {
          state.visitedView.splice(i, 1)
          break
        }
      }
    },
  },
  actions: {
  },
  modules: {
  }
})

2.路由定义类型，定义好 path，name，meta 

{
    path: '/data',
    component: Index,
    name: 'Coupon',
    meta: { title: '统计' },
    children: [
      {
        path: '/data/operational',
        name: 'operational',
        component: Operational,
        meta: { title: '渠道统计' }
      }
    ]
  },

 

3.封装成组件navTag.vue。

<template>
<div class="content">
    <el-button type="success" plain class="button-item" @click="reduceOneFn"><i class="el-icon-arrow-left"></i></el-button>
    <div class="scroll-box" id="nav-box">
      <div class="all-content" id="nav">
        <el-tag
        class="tag-content"
        draggable="false"
        :key="index"
        v-for="tag,index in visitedView"
        closable
        type="success"
        :effect="tag.path==$route.path?'dark':'plain'"
        :disable-transitions="false"
        size="medium"
        @click="toWhere(tag)"
        @close="handleClose(tag)">
        {{tag.meta.title}}
        </el-tag>
      </div>
    </div>
    <el-button type="success" plain class="button-item" @click="addOneFn"><i class="el-icon-arrow-right"></i></el-button>
</div>
</template>

<script>
  export default {
    name:'',
    data() {},
    computed:{
      visitedView(){
        return this.$store.state.visitedView
      }
    },
    watch: {
      //监听路由变化，生成标签导航
      $route() {
        let { name, fullPath, path, meta, query } = this.$route
        let viewObj = { name: name, fullPath: fullPath, path: path, meta: meta, query: query }
        this.$store.commit("addVisitedView", viewObj) //将此路由储存在vuex
      },
    },
    methods: {
      toWhere(tag){
        this.$router.push({path:tag.path,query:tag.query})
      },
      handleClose(tag) {
        this.visitedView.splice(this.visitedView.indexOf(tag), 1);
      },
      //右滑动
      addOneFn() {
        const allLength = this.visitedView.length * 110
        const boxLength = document.getElementById('nav-box').clientWidth
        if (allLength < boxLength) return
        const listEl = document.getElementById('nav')
        const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
        if (leftMove + boxLength + 630 > allLength) {
          listEl.style.left = '-' + (allLength - boxLength) + 'px'
        } else {
          listEl.style.left = '-' + (leftMove + 630) + 'px'
        }
      },
    //左滑动
      reduceOneFn() {
        const allLength = this.visitedView.length * 110
        const boxLength = document.getElementById('nav-box').clientWidth
        if (allLength < boxLength) return
        const listEl = document.getElementById('nav')
        const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
        if (leftMove + boxLength - 630 < boxLength) {
          listEl.style.left = '0px'
        } else {
          listEl.style.left = '-' + (leftMove - 630) + 'px'
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
.content{
  //width: 1570px;
  padding-right: 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .scroll-box{
    width: 1370px;
    height: 60px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  .scroll-box::-webkit-scrollbar {
    display: none;
  }
}

  .all-content{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    transform: all 2s;
    position: relative;
    left: 0;
    transition: left 1s;
    // overflow-x: auto;
    // overflow-y: hidden;
    // -ms-overflow-style: none;
    // overflow: -moz-scrollbars-none;
    .tag-content{
        flex-shrink: 0;
        margin-right:10px;
        cursor: pointer;
    }
  }
  // .all-content::-webkit-scrollbar {
  //   display: none;
  // }

</style>

本文主要是缝合以下两位同学，详细学习请移步呀！只因你(代码)太美，多看一眼就会爆炸~

vue+vuex实现标签页导航_vuex实现多标签导航-CSDN博客

vue-实现pc端点击滚动-左右箭头滑动_vue实现左右箭头滑动-CSDN博客