基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件，支持多数据类型的显示和内容为空时不显示气泡框-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件，支持多数据类型的显示和内容为空时不显示气泡框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景：因为有个需求就是鼠标经过可多选的 el-select 选择器时，需要有个气泡框显示已选的内容，其实 el-tooltip 气泡框可以满足需求，就是用 el-tooltip 气泡框来包裹 el-select 选择器，但是当选择器一个也没选中，即内容为空时不应该也显示气泡框，有点影响美观。应该就是若内容为空时，气泡框可以直接不显示出来。

因此，通过网上查找相关案例，自行设计一个仿Element UI的气泡框el-tooltip组件，不过多多少少不及官方Element UI的气泡框 el-tooltip 组件，只是可以满足内容为空时不显示气泡框，也就不需要v-if来判断内容是否为空，频繁创建与销毁组件，以及避免带来的用户体验问题。同时，支持输入的内容为整型、字符串、数组等，会有各自的显示。

父组件：index.vue

<template>
  <div>
    <div style="width: 300px; height: 300px; margin: 300px 200px; padding: 20px; background-color: #eee;">

      <!-- 气泡框内容为空 -->
      <MagicPopover :content="''">
        <el-button size="mini">气泡框内容为空，直接不显示气泡框</el-button>
      </MagicPopover>

      <br /><br /><br />


      <!-- 气泡框内容为整型 -->
      <MagicPopover :content="content1">
        <el-button size="mini">气泡框内容为整型</el-button>
      </MagicPopover>

      <br /><br /><br />

      <!-- 气泡框内容为字符串 -->
      <MagicPopover :content="content2">
        <el-button size="mini">气泡框内容为字符串</el-button>
      </MagicPopover>

      <br /><br /><br />

      <!-- 气泡框内容为数组 -->
      <MagicPopover :content="content3">
        <el-button size="mini">气泡框内容为数组</el-button>
      </MagicPopover>
    </div>    
  </div>
</template>

<script>
import MagicPopover from "./components/magicPopover";

export default {
  components: {
    MagicPopover
  },
  data: () => ({
    content1: 5201314,
    content2: 'HelloWorld',
    content3: [5201314, 'HelloWorld']
  })
}
</script>

<style scoped>

</style>

子组件：magicPopover.vue

<template>
  <div
    class="esse-popover"
    @mouseenter="handleMouseEnterEvent"
    @mouseleave="handleMouseLeaveEvent"
  >
    <transition name="fade">
      <div
        class="esse-popover-wrapper"
        ref="essePopoverWrapperRef"
        v-if="isView && content != null && content != ''"
      >
        <!-- 判断是否为数组 -->
        <div v-if="(content instanceof Array)">
          <p v-for="(item, key) of content" :key="key">{{ item }}</p>
        </div>

        <!-- 其他类型，包括字符串、整型、对象... -->
        <div v-else>
          <p>{{ content }}</p>
        </div>
      </div>
    </transition>

    <div ref="essePopoverSlotRef">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
props: [
  'content'
],
data() {
  return {
    isView: false,
  }
},
methods: {
  /**
   * 鼠标进入事件
   */
  handleMouseEnterEvent(event) {
    this.isView = true;
    this.$nextTick(() => {
      this.draw();
    })
  },

  /**
   * 鼠标离开事件
   */
  handleMouseLeaveEvent(event) {
    this.isView = false;
  },

  /**
   * 渲染气泡框
   */
  draw() {
    if (this.content != null && this.content != '') {
      document.body.appendChild(this.$refs.essePopoverWrapperRef);
      let {left, top, width} = this.$refs.essePopoverSlotRef.getBoundingClientRect();
      // console.log('this.$refs.essePopoverSlotRef.getBoundingClientRect() =>', this.$refs.essePopoverSlotRef.getBoundingClientRect());
      const offsetTop = 10;// 偏移高度
      const offsetleft = width / 2;// 便宜位移，从左边计算
      this.$refs.essePopoverWrapperRef.style.top = top - offsetTop + 'px';
      this.$refs.essePopoverWrapperRef.style.left = left + offsetleft + 'px';
      document.styleSheets[0].addRule('.esse-popover-wrapper::before','display: block; left: 50%; bottom: 0');// 显示三角形伪类元素
    }
  },
},
}
</script>

<style scoped>
  .esse-popover {
    width: auto;
    display: inline-block;
    position: relative;
  }

  .esse-popover-wrapper {
    position: absolute;
    z-index: 99;
    width: 250px;
    height: auto;
    padding: 6px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transform: translate(-50%, -100%);
  }

  .esse-popover-wrapper p {
    margin: auto;
    font-size: 13px;
  }

  /* 使用伪元素创建小三角形 */
  .esse-popover-wrapper::before {
    content: "";
    position: absolute;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #fff;
    transform: translate(-50%, 100%);
  }
  /* / 使用伪元素创建小三角形 */

  /* 淡入淡出效果 */
  .fade-enter-active {
    /* transition: opacity 1s; */
    transition: all ease 1s;
  }
  .fade-leave-active {
    /* transition: opacity 0.3s; */
    transition: all ease 0.3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0;
  }
  /* / 淡入淡出效果 */
</style>

效果如下~

el-tooltip 数组分别显示,vue.js