<!--提示框组件-->
<template>
    <transition name="fade">
      <div
        ref="tooltip"
        class="m-tooltip"
        v-show="showTooltip"
        @mouseenter="onShow"
        @mouseleave="onHide"
        :style="`max-width: ${maxWidth}PX; top: ${top}PX; left: ${left}PX;`"
      >
        <div class="u-tooltip-content">
          <slot>暂无内容</slot>
        </div>
        <!-- 底部三角形 -->
        <div class="u-tooltip-arrow"></div>
      </div>
    </transition>
  </template>
  <script>
  export default {
    name: "Tooltip",
    props: {
      maxWidth: {
        // 提示框内容最大宽度
        type: Number,
        default: 120,
      },
    },
    data() {
      return {
        showTooltip: false,
        hideTimer: null,
        top: 0, // 提示框top定位
        left: 0, // 提示框left定位
      };
    },
    methods: {
      show(target) {
        clearTimeout(this.hideTimer);
        const rect = target.getBoundingClientRect();
        const targetTop = rect.top + window.pageYOffset;
        const targetLeft = rect.left + window.pageXOffset;
        const targetWidth = rect.width;
        this.showTooltip = true;
        this.$nextTick(() => {
          const tipWidth = this.$refs.tooltip.offsetWidth; // 提示框元素宽度
          const tipHeight = this.$refs.tooltip.offsetHeight; // 提示框元素高度
          this.top = targetTop - tipHeight;
          this.left = targetLeft - (tipWidth - targetWidth) / 2;
        });
      },
      onShow() {
        clearTimeout(this.hideTimer);
        this.showTooltip = true;
      },
      onHide() {
        this.hideTimer = setTimeout(() => {
          this.showTooltip = false;
        }, 100);
      },
    },
  };
  </script>
  <style lang="less" scoped>
  // 渐变过渡效果
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: scale(0.8); // 缩放变换
    -ms-transform: scale(0.8); /* IE 9 */
    -webkit-transform: scale(0.8); /* Safari and Chrome */
  }
  // 滑动渐变过渡效果
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.3s ease;
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(6PX); // 滑动变换
    -ms-transform: translateY(6PX); /* IE 9 */
    -webkit-transform: translateY(6PX); /* Safari and Chrome */
    opacity: 0;
  }
  .m-tooltip {
    position: absolute;
    top: 0;
    z-index: 999;
    padding-bottom: 6PX;
    .u-tooltip-content {
      padding: 10PX;
      margin: 0 auto;
      word-break: break-all;
      word-wrap: break-word;
      border-radius: 4PX;
      font-weight: 400;
      font-size: 14PX;
      background: rgba(0,0,0,0.5);//背景颜色
      color: #fff;
     // box-shadow: 0PX 2PX 8PX 0PX rgba(0, 121, 221, 0.3);//修改阴影显示
    }
    .u-tooltip-arrow {
      margin: 0 auto;
      width: 0;
      height: 0;
      border-left: 2PX solid transparent;
      border-right: 2PX solid transparent;
      border-top: 4PX solid rgba(0,0,0,0.5);
    }
  }
  </style>
  