pco/sp-admin/sa-frame/nav/nav-tab-bar.vue

<template>
  <!-- 右边，第二行：tab栏 -->
  <div class="towards-box">
    <div class="towards-left" @click="scrollToLeft()" title="向左滑">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="towards-middle" @dblclick="$root.$refs['com-add-tab'].atOpen()"
         @drop="$event.preventDefault(); $event.stopPropagation();">

      <div class="tab-title-box" :style="{left: scrollX + 'px'}" @dblclick.stop="">
        <vuedraggable v-model="$root.tabList" chosen-class="chosen-tab" animation="500">
          <div
              v-for="tab in $root.tabList"
              :key="tab.id"
              :id=" 'tab-' + tab.id "
              class="tab-title"
              :class=" (tab == $root.nativeTab ? 'tab-native' : '') "
              @click="$root.showTab(tab)"
              @contextmenu.prevent="$root.$refs['com-right-menu'].right_showMenu(tab, $event)"
              draggable="true"
              @dragstart="$root.isDrag = true; $root.dragTab = tab"
              @dragend="$root.isDrag = false;"
          >
            <div class="tab-title-2">
              <!-- <i class="el-icon-caret-right"></i> -->
              <span>{{ tab.name }}</span>
              <i class="el-icon-close" v-if="!tab.hideClose" @click.stop="$root.closeTab(tab)"></i>
            </div>
          </div>
        </vuedraggable>
      </div>


    </div>
    <div class="towards-right" @click="scrollToRight()" title="向右滑">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
module.exports = {
  components: {
    "vuedraggable": window.vuedraggable,	// vuedraggable
  },
  data() {
    return {
      scrollX: 0,// 滚动条位置
    }
  },
  methods: {
    // ------------------- tab左右滑动  --------------------
    // 视角向左滑动一段距离
    scrollToLeft: function (scroll_width) {
      var width = document.querySelector('.nav-right-2').clientWidth;	// 视角宽度
      this.scrollX += scroll_width || width / 8;	// 视角向左滑动一段距离
      // 越界检查
      setTimeout(function () {
        if (this.scrollX > 0) {
          this.scrollX = 0;
        }
      }.bind(this), 200);
    },
    // 视角向右滑动一段距离
    scrollToRight: function (scroll_width) {
      var width = document.querySelector('.nav-right-2').clientWidth;	// 视角宽度
      var tabListWidth = document.querySelector('.tab-title-box').clientWidth;	// title总盒子宽度
      var rightLimit = (0 - tabListWidth + width / 2);	// 右滑的极限
      this.scrollX -= scroll_width || width / 8;		// 视角向右滑动一段距离
      // 越界检查
      setTimeout(function () {
        if (this.scrollX < rightLimit) {
          this.scrollX = rightLimit;
        }
        // 同时防止左边越界
        if (this.scrollX > 0) {
          this.scrollX = 0;
        }
      }.bind(this), 200);
    },
    // 自动归位
    scrollToAuto: function () {
      // console.log('自动归位=========');
      try {
        // 最后一个不用归位了
        // if(this.nativeTab == this.tabList[this.tabList.length - 1]){
        // 	return;
        // }
        var width = document.querySelector('.nav-right-2').clientWidth;	// 视角宽度
        var left = document.querySelector('.tab-native').lastChild.offsetLeft;	// 当前native-tilte下一个距离左边的距离
        // console.log(width, left, this.scrollX);
        // 如果在视图右边越界
        if (left + this.scrollX > (width - 200)) {
          return this.scrollToRight();
        }
        // 如果在视图左边越界
        if (left + this.scrollX < 0) {
          return this.scrollToLeft();
        }
      } catch (e) {
        // throw e;
      }
    },
    // 让鼠标滚轮变为横向滚动
    initScroll: function () {
      var scroll_width = 60;  // 设置每次滚动的长度，单位 px
      var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll";  // 鼠标滚轮滚动事件名
      $('.towards-middle').on(scroll_events, function (e) {
        var delta = e.originalEvent.wheelDelta;  // 鼠标滚轮滚动度数
        // 滑轮向上滚动，滚动条向左移动，scrollleft-
        if (delta > 0) {
          this.scrollToLeft(scroll_width);
        }
        // 滑轮向下滚动，滚动条向右移动，scrollleft+
        else {
          this.scrollToRight(scroll_width);
        }
      }.bind(this));
    }
  },
  created() {
    this.$nextTick(function () {
      this.initScroll();
    })
  }
}
</script>

<style scoped>

.towards-box > div {
  height: 100%;
  position: absolute;
}

.towards-left, .towards-right {
  width: 24px;
  text-align: center;
  background-color: #FFF;
  cursor: pointer;
}

.towards-left {
  border-right: 1px #fff solid;
}

.towards-right {
  border-left: 1px #fff solid;
  right: 0px;
}

.towards-left:hover i, .towards-right:hover i {
  font-weight: 700; /* font-weight: bold; */
}

.towards-middle {
  width: 10000px;
  overflow: auto; /* calc(100% - 50px) */
  left: 25px;
  background-color: #FFF;
}

.tab-title-box {
  display: inline-block;
  position: absolute;
  left: 0px;
  transition: all 0.2s;
}

.tab-title {
  font-size: 12px;
  cursor: pointer;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  color: #333;
}

.tab-title-2 {
  padding: 0px 10px; /* background-color: #FFF; */
}

.tab-title-2 {
  transition: padding 0.1s, margin 0.1s;
}

/* .tab-title .el-icon-caret-right{color: #EEE; font-size: 1.7em; position: relative; top: 4px;} */
.tab-title .el-icon-close {
  display: inline-block;
  border-radius: 50%;
  padding: 1px;
  color: #ccc;
  margin-left: -8px;
}

.tab-title .el-icon-close:hover {
  background-color: red;
  color: #FFF;
}

.tab-title span {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.tab-title:hover span, .tab-native span { /* font-weight: bold; */
}


/* 卡片样式 */
/* .tab-title-box>div{line-height: 35px;} */
.tab-title {
  transition: width 0.2s, background 0s, border 0.2s;
}

.tab-native {
  transition: width 0.2s, background 0.2s, border 0.2s;
}

.tab-title {
  border-radius: 1.5px;
  border: 1px #e5e5e5 solid;
  line-height: 28px;
  height: 27px;
  margin: 3px 1.5px;
  background-color: #fff;
}

/* .tab-title.tab-native{border: 1px #409EFF solid; background-color: #409EFF; color: #fff; }
.tab-title:hover{border: 1px #409EFF solid;} */
/* .chosen-tab .tab-title-2{background-color: red;} */

</style>