页面打开标签组组件，可左右拖拽自由增删

<template>
  <div class="tabs">
    <div class="wrap" id="nav_scroll_tabs">
      <el-tag
        v-for="item in tags"
        :key="item.url"
        :closable="item.name === '首页' ? false : true"
        :class="{'act': item.url === actUrl}"
        size="medium"
        @click="handleClick(item)"
        @close="handleClose(item)"
        type="info">
        {{ item.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'indexMenuTabs',
  data() {
    return {
      actUrl: '/',
      tags: [
        { url: '/', name: '首页' }, //首页标签不可删除
        { url: '/2', name: '标签二二二二' },
        { url: '/3', name: '标签三三三三三三' },
        { url: '/4', name: '标签四四四四四四四四四四四四四四' },
        { url: '/5', name: '标签五五五五' },
        { url: '/6', name: '标签六' },
        { url: '/7', name: '标签七七七' },
        { url: '/8', name: '标签八八八八八八八' },
        { url: '/9', name: '标签九九九九九九' },
        { url: '/10', name: '标签十十十十十十十十十十' },
        { url: '/11', name: '标签一' },
        { url: '/12', name: '标签二' },
        { url: '/13', name: '标签三' },
        { url: '/14', name: '标签四' },
        { url: '/15', name: '标签五' },
      ]
    };
  },
  mounted() {
    this.scrollTags()
  },
  methods: {
    handleClick(item) {
      this.$router.push(item.url)
      this.actUrl = item.url
    },
    //添加标签的按钮，点击菜单时调用
    handleAdd(item) {
      if (!this.tags.find(v => v.url === item.url)) { //如果现有项里没有新增项
        this.tags.push(item) //则push到现有项中
      }
      this.handleClick(item)
    },
    handleClose(item) {
      const index = this.tags.findIndex(v => v.url === item.url) //获取当前删除项的下标
      if (item.url === this.actUrl) { //如果删除的是当前激活状态的项
        this.handleClick(this.tags[index - 1]) //当前激活状态的项前移一位
      }
      this.tags.splice(index, 1); //删除当前删除项
    },
    scrollTags() {
      // 获取要绑定事件的元素
      const nav = document.getElementById('nav_scroll_tabs');
      let flag; // 鼠标按下
      let downX; // 鼠标点击的x下标
      let scrollLeft; // 当前元素滚动条的偏移量
      nav.addEventListener('mousedown', function(event) {
        flag = true;
        downX = event.clientX; // 获取到点击的x下标
        scrollLeft = nav.scrollLeft; // 获取当前元素滚动条的偏移量
      });
      nav.addEventListener('mousemove', function(event) {
        if (flag) { // 判断是否是鼠标按下滚动元素区域
          const moveX = event.clientX; // 获取移动的x轴
          const scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
          nav.scrollLeft = scrollLeft - scrollX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
        }
      });
      // 鼠标抬起停止拖动
      nav.addEventListener('mouseup', function() {flag = false;});
      // 鼠标离开元素停止拖动
      nav.addEventListener('mouseleave', function() {flag = false;});
    },
  }
};
</script>

<style scoped>
.tabs{
  position: absolute;
  left: 210px;
  right: 0;
  height: 28px;
  border-top: 1px solid #e9e9eb;
  border-bottom: 1px solid #e9e9eb;
  overflow: hidden;
}
.wrap{
  white-space: nowrap;
  overflow-x: auto;
  user-select: none; /*设置文本不可选中*/
}
.el-tag{
  border-top: none;
  border-left: none;
  border-bottom: none;
  border-radius: 0;
  cursor: pointer;
}
.el-tag:hover,
.el-tag.act /deep/.el-tag__close:hover,
.el-tag:hover /deep/.el-tag__close{
  background: #ecf5ff!important;
  color: #409eff!important;
}
.el-tag.act,
.el-tag.act /deep/.el-tag__close,
.el-tag /deep/.el-tag__close:hover{
  color: #ecf5ff!important;
  background-color: #409eff!important;
}
</style>