男和男做那个视频网站好网络优化培训

使用自定义el- tooltip 组件

定义

Tooltip是一种小型弹出框，它显示有关特定页面元素的信息，例如按钮、链接或图标。Tooltip通常以半透明的气泡形式呈现，并出现在页面元素的旁边或下方。

它可以改善用户体验，使用户更容易理解页面元素的功能和意图。用户可以通过将鼠标悬停在页面元素上来快速了解有关该元素的信息，而无需离开当前页面或浏览其他页面。

定位问题，很重要，top topLeft topRight bottom bottomLeft bottomRight left right，tooltip可以出现在不同的位置
采用默认插槽的方式，将需要tooltip的内容放置
通过父组件传入的visible进行手动控制tooltip的显现和隐藏
可以自定义tooltip背景色，如果自定义了，文字为白色

创建tooltip组件

/assets/directive/tooltip.js

在全局main.js引入组件

import tooltip from '@/assets/directive/tooltip.js'
Vue.directive('tooltip', tooltip)

组件代码（按需修改）

import {  getLanguage } from '@/assets/language/langs'
export default {// 指令所在组件的 VNode 及其子 VNode 全部更新后调用componentUpdated (el) {//   console.log(...arguments);/* 第1步：先要创建一个容器`span`去获取文本的宽度 */// 获取当前元素的styleconst curStyle = window.getComputedStyle(el, '');// 创建一个容器来记录文字的widthconst textSpan = document.createElement('span');// 设置新容器的字体样式，确保与当前需要隐藏的样式相同textSpan.style.fontSize = curStyle.fontSize;textSpan.style.fontWeight = curStyle.fontWeight;textSpan.style.fontFamily = curStyle.fontFamily;// 将容器插入body，如果不插入，offsetWidth为0document.body.appendChild(textSpan);// 设置新容器的文字const arr = el.innerText.split("  "