menduner/src/components/CtTooltip/ToolTip.vue

<template>
  <!-- 指示 -->
  <transition name="el-fade-in-linear">
    <div v-show="tooltipShow" :style="tooltipStyle" class="wq-tooltip"
    >
      <span class="wq-tooltip-text" v-text="text"></span>
      <!-- 箭头 -->
      <!-- <div :class="[
        {'left':placements === 'left'},
        {'bottom':placements==='bottom'},
        {'right':placements==='right'},
        {'top':placements==='top'}]" 
        class="wq-tooltip-arrow"
      >
      </div> -->
    </div>
  </transition>
</template>

<script>
import {ref, computed, reactive } from 'vue'

export default {
  setup() {
    // 显示弹框
    const tooltipShow = ref(false);

    // 提示内容
    const text = ref()

    // 方向
    const placements = ref('left')

    // 显示
    function showTip() {
      tooltipShow.value = true
    }
    //设置提示内容
    function setContent(content) {
      text.value = content
    }
    //隐藏
    function hiddenTip() {
      tooltipShow.value = false
    }

    // 位置
    const tooltipPosition = reactive({
      x: 0,
      y: 0
    })
    const tooltipStyle = computed(() => {
      return {
        transform: `translate3d(${tooltipPosition.value.x}px,${tooltipPosition.value.y}px,0)`
      }
    })
    return {
      tooltipShow,
      showTip,
      hiddenTip,
      setContent,
      tooltipPosition,
      tooltipStyle,
      text,
      placements,
    }
  }
}
</script>

<style lang="scss" scoped>
// tooltip
.wq-tooltip {
  padding: 5px 16px;
  font-size: .875rem;
  line-height: 1.6;
  min-width: 10px;
  word-wrap: break-word;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  background: rgb(66, 66, 66);
  color: rgb(238, 238, 238);
  border-radius: 4px;
  font-size: .875rem;
  line-height: 1.6;
  display: block;
  z-index: 2000;
  opacity: 1;
  width: auto;
  transition-property: opacity,width;
}

// 小箭头
.wq-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
}

// 小箭头如果在左侧
.wq-tooltip-arrow.left {
  border-color: transparent transparent transparent #303133;
  right: -15px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

// 小箭头如果在下侧
.wq-tooltip-arrow.bottom {
  top: -15px;
  border-color: transparent transparent #303133 transparent;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

// 小箭头如果在右侧
.wq-tooltip-arrow.right {
  left: -15px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  border-color: transparent #303133 transparent transparent;
}

// 小箭头如果在上侧
.wq-tooltip-arrow.top {
  bottom: -15px;
  border-color: #303133 transparent transparent transparent;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* 动画 */
.tooltip-enter-from,
.tooltip-leave-to {
  opacity: 0;
  transition: opacity .3s ease;
}

.tooltip-leave-from,
.tooltip-enter-to {
  transition: opacity .1s ease;
}
</style>