vue3通过ElementPlus的tooltip组件实现自定义指令文字提示

简介

之前的项目中，有些文字比较长，不可能全部展示出来，就自己手写了个指令版本的tooltip,开始使用的显示方式，是自己在body中单独创建了个元素，然后监听鼠标事件，然后采用position:fixed的方式展示。
后来，想了下，打算借助ElementPlus的tooltip组件进行实现，只需要自己去判断内容是否超出展示的边界即可，于是便有了这篇文章。

步骤1：定义指令tooltip

/**
 * 指令 tooltip
 * 使用方式：<div v-tooltip></div>
 */
export const tooltip: Directive = {
  mounted: function (el: HTMLElement, binding: DirectiveBinding) {
    createTooltip(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    createTooltip(el, binding);
  },
};

步骤2：createTooltip函数

autoShowToolTip在步骤3中

/**
 * 创建tooltip，这里采用element-plus的tooltip组件
 * @param el 
 * @param binding 
 */
const createTooltip = (el: any, binding: DirectiveBinding) => {
  /**
   * 判断是否显示tooltip
   * 如果传值为true，则显示tooltip
   * 否则，autoShowToolTip 自动判断是否显示tooltip
   */
  const isShow = binding.value || autoShowToolTip(el, binding);
  // 创建组件，显示tooltip
  if (isShow) {
    // 判断是否有根元素，存在，则移除
    const elRoot = document.querySelector("#_tooltip_root");
    if (elRoot) {
      elRoot.remove();
    }
    // 初始化 根元素
    el._tiproot = null;
    el._tipapp = null;
    const id = "_tooltip_root";
    const _tiproot = document.createElement("div");
    _tiproot.id = id;
    _tiproot.classList.add("_tiproot");
    // 通过createApp 创建实例组件
    const _tipapp = createApp(ElTooltip, {
      trigger: "hover",
      virtualRef: el,
      rawContent: true,
      placement: "top",
      virtualTriggering: true,
      content: el.innerHTML,
    });
    el._tiproot = _tiproot;
    el._tipapp = _tipapp;
    // body添加根元素
    document.body.appendChild(_tiproot);
    // 将新组件挂载到根元素
    if (_tipapp && _tiproot) {
      el._tipapp.mount("#" + id);
    }
  }
};

步骤3：autoShowToolTip

/**
 * 判断宽度和高度是否自动展示提示内容
 * @param el 
 * @param binding 
 * @returns 
 */
const autoShowToolTip = (el: any, binding: DirectiveBinding) => {
  /**
   * 通过创建range 获取元素内容的宽度和高度
   */
  const range = document.createRange();
  range.setStart(el, 0);
  if (el && el.childNodes.length) {
    range.setEnd(el, el.childNodes.length);
  }
  let rangeWidth = range.getBoundingClientRect().width;
  let rangeHeight = range.getBoundingClientRect().height;
  const offsetWidth = rangeWidth - Math.floor(rangeWidth);
  const offsetHeight = rangeHeight - Math.floor(rangeHeight);
  if (offsetWidth < 0.001) {
    rangeWidth = Math.floor(rangeWidth);
  }
  if (offsetHeight < 0.001) {
    rangeHeight = Math.floor(rangeHeight);
  }
  // 计算元素在页面中的宽度、高度
  const style: any = window.getComputedStyle(el, null);
  const maxWidth = parseInt(style["width"] || style["width"]) || 0;
  const maxHeight = parseInt(style["height"]);
  // 获取元素的padding
  const pLeft = style["padding-left"];
  const pRight = style["padding-left"];
  const pTop = style["padding-left"];
  const pBottom = style["padding-left"];
  // 计算最终宽度、高度
  const finalWidth = rangeWidth + parseInt(pLeft) + parseInt(pRight);
  const finalHeight = rangeHeight + parseInt(pTop) + parseInt(pBottom);
  console.log(finalWidth, maxWidth);
  console.log(finalHeight, maxHeight);
  if (finalWidth > maxWidth || finalHeight > maxHeight) {
    return true;
  }
  return false;
};

步骤4：注册指令

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { tooltip } from "./directive"
const app = createApp(App)
app.use(ElementPlus)
app.directive("tooltip", tooltip)
app.mount('#app')

步骤5：测试

<script setup lang="ts"></script>
<template>
   <ul>
    <div class="tip-text" >单行文本溢出展示</div>
    <li  v-tooltip class="line1">孩子们呵着冻得通红，像紫芽姜一般的小手，七八个一齐来塑雪罗汉。因为不成功，谁的父亲也来帮忙了。罗汉就塑得比孩子们高得多，虽然不过是上小下大的一堆，终于分不清是壶卢还是罗汉；然而很洁白，很明艳，以自身的滋润相粘结，整个地闪闪地生光。</li>
    <div class="tip-text" >多行文本溢出展示</div>
    <li v-tooltip class="line-multiple">孩子们呵着冻得通红，像紫芽姜一般的小手，七八个一齐来塑雪罗汉。因为不成功，谁的父亲也来帮忙了。罗汉就塑得比孩子们高得多，虽然不过是上小下大的一堆，终于分不清是壶卢还是罗汉；然而很洁白，很明艳，以自身的滋润相粘结，整个地闪闪地生光。</li>
   </ul>
</template>

<style scoped lang="css">
ul{
list-style: none;
list-style-type: none;
width: 1200px;
margin: 0 auto;
}
.tip-text{
  font-size: 30px;
  color: red;
  margin-top: 30px;
  margin-bottom: 10px;
}
/* 单行文本溢出展示 */
.line1{
  cursor: pointer;
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 多行文本溢出展示 */
.line-multiple{
  display: -webkit-box;
  width: 400px;
  cursor: pointer;
  -webkit-line-clamp: 2; /* 指定显示的行数 */
  -webkit-box-orient: vertical; /* 设置伸缩盒模型的子元素排列方向为垂直 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>