右键弹框，根据鼠标位置显示 echarts实现vue自定义组件tooltips

功能介绍：

1）有边框超出检查
2）鼠标右键点击出现弹框
3）可以替换echarts的tooltips，实现vue组件写echarts弹框
4）可以拖拽移动（可超出边框）

效果图：

父级代码

<template>
  <div id="box" @contextmenu.prevent="contextmenu" @click="click">
    <EchartsTooltip
      :show="tooltipShow"
      :data="tooltipData"
      :position="mousePosition"
      @select="echartsTooltipSelect"
    />
  </div>
</template>

<script>
import EchartsTooltip from '@/components/echartsTooltip'
export default {
  components: {
    EchartsTooltip
  },
  data() {
    return {
      name: '',
      tooltipShow: false,
      tooltipData: {},
      mousePosition: {}
    }
  },
  methods: {
    init() {},
    contextmenu(params) {
      const chartBox = document.getElementById('box')
      this.tooltipShow = true
      this.mousePosition = {
        x: params.offsetX,
        y: params.offsetY,
        boxWidth: chartBox.clientWidth,
        boxHeight: chartBox.clientHeight
      }
      const list = [];
      [{ name: 'zs' }, { name: 'ls' }, { name: 'lb' }, { name: 'lw' }].forEach((item) => {
        list.push(item)
      })
      this.tooltipData = { name: '姓名', list }
    },
    click() {
      this.tooltipShow = false
    },
    echartsTooltipSelect() {}
  }
}
</script>

<style lang="scss" scoped>
#box {
  width: 1000px;
  height: 500px;
  border: 1px solid #f60;
  margin: 30px;
  position: relative;
}
</style>

弹框组件子级代码

<template>
  <div
    v-show="show"
    class="echarts-tooltip"
    :style="{ top, left, maxHeight: `${height}px`, width: `${width}px` }"
    @contextmenu.stop=""
    @click.stop=""
  >
    <div class="border-inner" :style="{maxHeight: `${height - 12}px`,}">
      <p class="pop-title flex-center">{{ data.name }}</p>
      <ul v-if="data.list&&data.list.length > 0" :style="{maxHeight: `${height - 83}px`}" @mousedown.stop="">
        <li
          v-for="(item, i) in data.list"
          :key="i"
          :class="[activeIndex === i ? 'is-active' : '']"
          @click="click(item, i)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div v-else class="none-data flex-center">暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * 显示数据
     */
    data: {
      type: Object,
      default: () => {}
    },
    /**
     * 位置信息
     *  x: params.event.offsetX, // 鼠标x轴
        y:params.event.offsetY, // 鼠标y轴
        boxWidth: chartBox.clientWidth, // 外围盒子的宽度
        boxHeight: chartBox.clientHeight // 外围盒子的高度
     */
    position: {
      type: Object,
      default: () => {}
    },
    /**
     * 控制是否显示
     */
    show: Boolean
  },
  data() {
    return {
      // 提示框的高度
      height: 208,
      // 提示框的宽度
      width: 296,
      // 偏差，[x,y]
      offset: [1, 1],
      // 当前数据激活项
      activeIndex: -1
    }
  },
  computed: {
    top() {
      // 定位信息
      const { y, boxHeight, drag } = this.position
      // 偏移量
      const [, of1] = this.offset
      if (drag) return `${y + of1}px`
      return y + this.height > boxHeight
        ? `${y + of1 - this.height}px`
        : `${y + of1}px`
    },
    left() {
      const { x, boxWidth, drag } = this.position
      const [of0] = this.offset
      if (drag) return `${x + of0}px`
      return x + this.width > boxWidth
        ? `${x - of0 - this.width}px`
        : `${x + of0}px`
    }
  },
  watch: {
    position: {
      deep: true,
      handler: function(val) {
        this.activeIndex = -1
      }
    }
  },
  mounted() {
    this.dragEvent()
  },
  methods: {
    click(item, i) {
      this.activeIndex = i
      this.$emit('select', item)
    },
    dragEvent() {
      const resize = document.getElementsByClassName('echarts-tooltip')
      const _this = this
      for (let i = 0; i < resize.length; i++) {
        resize[i].onmousedown = function(e) {
          const y = e.clientY - parseFloat(_this.top)
          const x = e.clientX - parseFloat(_this.left)
          resize[i].style.transition = 'none'
          document.onmousemove = function(e) {
            const endX = e.clientX
            const endY = e.clientY
            resize[i].style.left = `${(endX - x)}px`
            resize[i].style.top = `${(endY - y)}px`
          }
          document.onmouseup = function(e) {
            document.onmousemove = null
            document.onmouseup = null
            _this.position.x = e.clientX - x
            _this.position.y = e.clientY - y - _this.offset[1]
            _this.position.drag = true
            resize[i].releaseCapture && resize[i].releaseCapture()
            resize[i].style.transition = 'all 0.3s'
          }
          resize[i].setCapture && resize[i].setCapture()
          return false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all 0.3s;
  animation: fadeIn 0.6s;
  background: rgba(11, 10, 37, 0.5);
  border: 1px solid #0ab1ff;
  padding: 6px;
  box-sizing: border-box;
  .border-inner {
    background: rgba(11, 10, 37, 0.4);
    border: 1px solid rgba(10, 177, 255, 0.6);
    box-shadow: 0 0 20px 0px rgba(10, 177, 255, 0.6) inset;
    padding: 12px;
    padding-top: 0;
    box-sizing: border-box;
    .pop-title {
      height: 34px;
      color: #cee9ff;
      text-shadow: 0px 0px 8px rgba(176, 222, 255, 0.75);
      font-weight: bold;
      font-size: 16px;
    }
    ul {
      color: #99c2d5;
      height: calc(100% - 83px);
      overflow-y: auto;
      padding: 0;
      li {
        height: 27px;
        border: 1px solid rgba(179, 223, 255, 0.6);
        box-shadow: 0 0 10px 0px rgba(179, 223, 255, 0.3) inset;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
        cursor: pointer;
        transition: all .3s;
        &:last-child {
          margin-bottom: 0;
        }
        &:hover {
          color: #0ab1ff;
          box-shadow: 0 0 10px 0px rgba(10, 177, 255, 0.3) inset;
        }
      }
      .is-active {
        color: #0ab1ff;
        border: 1px solid rgba(10, 177, 255, 0.6) !important;
        box-shadow: 0 0 10px 0px rgba(10, 177, 255, 0.3) inset !important;
      }
    }
    .none-data {
      height: 152px;
      width: 100%;
    }
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>