提交一把

jiangping

2024-10-28 8ab8088e11c13689856d70669ce18047d1317321

 company/src/components/common/tagsview.vue

@@ -14,10 +14,11 @@
        {{ item.label }}
        <!-- 这个地方一定要click加个stop阻止，不然会因为事件冒泡一直触发父元素的点击事件，无法跳转另一个路由 -->
        <span v-if="tags.length > 1" class="el-icon-close tagsicon" @click.stop="handleClose(item,index)"></span>
        <!-- <ul v-show="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}">
          <li @click.stop="rightClose()">关闭</li>
          <li @click.stop="cleartags($route.path)">关闭其他</li>
        </ul> -->
         <ul v-show="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}">
<!--          <li @click.stop="rightClose()">关闭</li>-->
<!--          <li @click.stop="cleartags($route.path)">全部关闭</li>-->
          <li @click.stop="cleartags()">关闭其他</li>
        </ul>
      </div>
    </div>
    <i class="el-icon-arrow-right btn" v-if="rightStatus"  :class="rightStatus?'nor-btn':'ban-btn'" @click="scrollToEnd()"></i>
@@ -68,7 +69,7 @@
  },
  mounted() {
    this.$refs.tags.addEventListener('scroll', e => {
      

      if (this.$refs.tags.scrollLeft > 0) {
        this.leftStatus = true
      } else {
@@ -146,19 +147,24 @@

      let tagsDiv = document.getElementById('tags-box')
      tagsDiv.scrollTo(0, 0)
    }, 
    },
    scrollToEnd() {
      let tagsDiv = document.getElementById('tags-box')
      tagsDiv.scrollTo(tagsDiv.scrollWidth, 0)
    },
    //右键事件，显示右键菜单，并固定好位置。
    openMenu(tag, e) {
      if(this.tags.length ==1){
        return
      }
      this.visible = true
      this.selectedTag = tag
      const offsetLeft = this.$el.getBoundingClientRect().left
      console.log(tag, e);
      this.left = e.clientX - offsetLeft + 60  //右键菜单距离左边的距离
      this.top = e.clientY +20  //右键菜单距离上面的距离           这两个可以更改，看看自己的右键菜单在什么位置，自己调
      console.log(tag, e,e.clientX,e.clientY,offsetLeft);
      this.left = e.clientX - offsetLeft  + 200  //右键菜单距离左边的距离
      this.top =  50  //右键菜单距离上面的距离  这两个可以更改，看看自己的右键菜单在什么位置，自己调
      // this.left = e.clientX  + 60  //右键菜单距离左边的距离
      // this.top = e.clientY +20  //右键菜单距离上面的距离  这两个可以更改，看看自己的右键菜单在什么位置，自己调
    },
    //隐藏右键菜单
    closeMenu() {
@@ -167,9 +173,9 @@
    //右键菜单关闭所有选项，触发vuex中的方法，把当前路由当参数传过去用于判断
    cleartags(val){
      this.visible = false
      this.cleartagsview(val)
      this.cleartagsview(this.selectedTag)
    }
  },
  }
};
</script>