zz-admin/src/components/tabberList.vue

<template>
  <div id="tabberList">
    <div class="lefts" @click="Move('left')">
      <i class="el-icon-caret-left"></i>
    </div>
    <div class="lisBx">
      <div
        class="lisboxssT"
        :class="item.path === navActive ? 'activesBtns' : ''"
        v-for="(item, index) in tabberLists"
        :key="index"
        @click.stop="actives(item, $event)"
        @contextmenu.prevent="rightBtn(item, $event)"
      >
        {{ item.title }}
        <i
          class="el-icon-close iconClose"
          v-if="item.path !== '/home'"
          @click.stop="close(item, index)"
        ></i>
      </div>
    </div>
    <div class="rights" @click="Move('right')">
      <i class="el-icon-caret-right"></i>
    </div>
    <div
      class="rightBts"
      v-if="visible"
      :style="{ top: top + 'px', left: left + 'px' }"
    >
      <div class="bls" @click="removeLeft">关闭左侧</div>
      <div class="bls" @click="removeRight">关闭右侧</div>
      <div class="bls" @click="removeQI">关闭其他</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 0,
      left: 0,
      visible: false,
      pageClickItem: {},
    };
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  computed: {
    tabberLists: function () {
      return this.$store.state.tabberLists;
    },
    navActive: function () {
      this.changes();
      return this.$store.getters.navActive;
    },
  },
  methods: {
    removeLeft() {
      if (this.pageClickItem.path === "/home") {
        return;
      }
      var self = this;
      var ary = JSON.parse(JSON.stringify(this.$store.state.tabberLists));
      var newAry = [];
      ary.map((item, index) => {
        if (item.path === self.pageClickItem.path) {
          newAry = ary.splice(index, ary.length);
          newAry.unshift(ary[0]);
        }
      });
      this.changeMove(newAry);
    },
    removeRight() {
      var self = this;
      var ary = JSON.parse(JSON.stringify(this.$store.state.tabberLists));
      var newAry = [];
      ary.map((item, index) => {
        if (item.path === self.pageClickItem.path) {
          newAry = ary.splice(0, index + 1);
        }
      });
      this.changeMove(newAry);
    },
    removeQI() {
      var self = this;
      var ary = JSON.parse(JSON.stringify(this.$store.state.tabberLists));
      var newAry = [];
      ary.map((item, index) => {
        if (item.path === self.pageClickItem.path) {
          newAry.push(item);
        }
      });
      if (this.pageClickItem.path !== "/home") {
        newAry.unshift(ary[0]);
      }
      this.changeMove(newAry);
    },
    changeMove(v) {
      this.$store.state.tabberLists = v;
      localStorage["tabberLists"] = JSON.stringify(v);
      if (this.pageClickItem.path !== this.$store.getters.navActive) {
        this.$router.push({
          path: this.pageClickItem.path,
        });
      }
    },
    Move(str) {
      var a = document.getElementsByClassName("lisBx");
      var scrollWidth = a[0].scrollWidth - a[0].clientWidth;
      var aScroll =
        a[0].scrollLeft - a[0].clientWidth <= 0
          ? 0
          : a[0].scrollLeft - a[0].clientWidth;
      var bScroll =
        a[0].scrollLeft + a[0].clientWidth >= scrollWidth
          ? scrollWidth
          : a[0].scrollLeft + a[0].clientWidth;
      if (str === "left") {
        var aInt = setInterval(() => {
          if (a[0].scrollLeft <= aScroll) {
            clearInterval(aInt);
            return;
          } else {
            a[0].scrollLeft = a[0].scrollLeft - 10;
          }
        }, 3);
      }
      if (str === "right") {
        var bInt = setInterval(() => {
          if (a[0].scrollLeft >= bScroll) {
            clearInterval(bInt);
            return;
          } else {
            a[0].scrollLeft = a[0].scrollLeft + 10;
          }
        }, 3);
      }
    },
    rightBtn(item, e) {
      this.top = e.pageY;
      this.left = e.pageX;
      this.visible = true;
      this.pageClickItem = item;
    },
    closeMenu() {
      this.visible = false;
    },
    actives(v, e) {
      if (v.path === this.$store.getters.navActive) {
        return;
      }
      this.changeStyMover(e.target.offsetLeft);
      this.$router.push({
        path: v.path,
      });
    },
    changeStyMover(ext) {
      var a = document.getElementsByClassName("lisBx");
      a[0].scrollLeft = ext - a[0].clientWidth / 2;
    },
    changes() {
      var self = this;
      this.$nextTick(() => {
        setTimeout(() => {
          var est =
            document.getElementsByClassName("activesBtns")[0].offsetLeft;
          self.changeStyMover(est);
        }, 300);
      });
    },
    //关闭
    close(i, v) {
      var data = {
        item: i,
        index: v,
        path: this.$route.path,
      };
      this.$store.commit("delTabberLists", data);
    },
  },
};
</script>

<style lang="less" scoped>
#tabberList {
  padding: 0px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background-color: #fff;
  box-shadow: 0px 3px 5px 0px rgba(28, 41, 90, 0.05);
  .rightBts {
    position: fixed;
    width: 100px;
    z-index: 10000;
    box-shadow: 2px 2px 10px #aaa !important;
    border-radius: 4px;
    border: 1px solid #9e9e9e;
    background-color: #fff;
    .bls {
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .lefts {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 4px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #eee;
  }
  .rights {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    margin-left: 4px;
    border-radius: 8px;
    border: 1px solid #eee;
  }
  .lisBx {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    overflow-x: auto;
    transition: all 0.2s;
    .lisboxssT {
      background-color: #fff;
      border-radius: 8px;
      margin: 0px 1px;
      padding: 0px 10px;
      height: 36px;
      line-height: 36px;
      flex-shrink: 0;
      color: #999;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s;
      .iconClose {
        font-size: 12px;
      }
      &:hover {
        background-color: #e3edfe;
      }
    }
    .activesBtns {
      background-color: #e3edfe;
      color: #2f4379;
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>