FD_Pano/src/components/tablist/index.vue

<template>
  <div class="menu-con" :key="id" :style="{left:deviation+'px'}">
    <template v-if="isShowScroll">
      <i class="iconfont icon_back" @click="moveSlide('forward')"></i>
      <i class="iconfont icon_forward" @click="moveSlide('back')"></i>
      <span class="addBtn" @click="$emit('addGroup')" v-if="!hiddenHover">
          <i class="iconfont icon_plus"></i>
      </span>
    </template>
    <div class="menu sub-menu" :class="(!isShowScroll&&!deviation?'sm-active ':(cls?'':'addBef')) + ' ' + `${cls}`" :id="id">
      <ul class="mytablist" :id="subId" :style="{ left: oneLeft + 'px' }">
        <li
          :title="item.name"
          v-for="(item, i) in list"
          :class="{ active: item.id == active.id,hidden:hiddenHover }"
          @click="$emit('clickItem',item)"
          :key="i"
        >
          {{ item.name }}
          <div
            class="oper"
            @click.stop
            @mouseleave="handleleave"
            @mouseenter="handleover"
          >
            <i class="iconfont iconmore"></i>
            <slot name="hover" :item="item">
            </slot>
          </div>
        </li>
        <li
        v-if="!hiddenHover&&!isShowScroll"
          class="li-add"
          @click="$emit('addGroup')"
        >
          <i class="iconfont icon_plus"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
const RANGE = 60
export default {
  data(){
    return {
      hasLoad:false
    }
  },
  props: {
    list: {
      default() {
        return [];
      },
      type: Array,
    },
    cls:String,
    subId:String,
    id:String,
    deviation:Number,
    active:Object | Array,
    hiddenHover:Boolean
  },
  computed:{

  },
  mounted(){
    this.refreshScroll()
    if (!this.hasLoad) {
      this.$nextTick(()=>{
        this.refreshScroll()
        this.hasLoad=true
      })
    }

  },
  watch: {
    '$route.name':function (newVal) {
      if (newVal) {
        this.refreshScroll()
      }
    },
    list:function () {
      this.refreshScroll()
    }
  },
  methods:{
    refreshScroll(){
      this.$nextTick(()=>{
        this.oneLeft = 0
        if (document.querySelector('#'+this.subId)) {
            this.oneWidth = document.querySelector('#'+this.subId).offsetWidth
            this.menuWidth = document.querySelector('#'+this.id).offsetWidth
            console.log(this.menuWidth,this.oneLeft, this.oneWidth);
            this.isShowScroll = this.oneWidth  + 40 > this.menuWidth
        }
      })
    },
    moveSlide(type) {
      if (type == 'back') {
        console.log(this.menuWidth,this.oneLeft, this.oneWidth);
        if ((this.menuWidth - this.oneLeft) > this.oneWidth) {
          return
        }
      }
      else{
        if (this.oneLeft>=0) {
          this.oneLeft=0
          return
        }
      }
     
      let del = type == 'back'?-RANGE:RANGE
      this.oneLeft+=del
    },
    handleover(e) {
      this.currentXY = { top: e.y, left: e.x };
      let ul = $(e.target).find("ul");
      ul.css({
        top: (e.y - 5) + "px",
        left: (e.x - 5) + "px",
        display: "block",
      });
    },
    handleleave(e) {
      let ul = $(e.target).find("ul");
      ul.hide();
    },
  },
  data() {
    return {
      oneLeft:0,
      oneWidth:0,
      menuWidth:0,
      isShowScroll:false
    };
  },
};
</script>

<style lang="less" scoped>
.menu-con {
  width: 100%;
  position: relative;
  .addBtn{
    background-color: @color;
    width: 30px;
    min-width: unset;
    max-width: 30px;
    height: 30px;
    color: #fff;
    padding: 0;
    position: absolute;
    cursor: pointer;
    border-radius: 2px;
    right: -40px;
    >i{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 26px;
    }
  }
  > .iconfont {
    left: 10px;
    top: 8px;
    position: absolute;
    cursor: pointer;
  }
  > .icon_forward {
    right: 10px;
    left: auto;
  }
  .sub-menu {
    max-width: calc(100% - 70px);
    position: relative;
    overflow: hidden;
    height: 40px;
    margin: 0 auto;

    > ul {
      max-width: unset;
      overflow: unset;
      position: absolute;
      left: 0;
      transition: 0.3s ease all;
      .fixed {
        position: absolute;
        right: 0;
      }
      // &::before{
      //   width: calc(100% - 70px);
      //   height: calc(100% - 10px);
      //   pointer-events: none;
      //   content: '';
      //   background: linear-gradient(to right,rgba(#fff,0) 0%,rgba(#fff,0) 98%,rgba(#000,1) 100%);
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   z-index: 999;
      //   display: inline-block;
      // }
    }
  }

  .addBef{
    position: relative;
    &::before{
      position: absolute;
      right: 0;
      top: 0;
      content: '';
      display: inline-block;
      width: 40px;
      height: 30px;
      z-index: 999;
      pointer-events: none;
      background: linear-gradient(to right, rgba(0,0,0,0), #161a1a);
    }
  }

  .sm-active{
    max-width: 100%;

  }
}
</style>