【分享一个vue指令】鼠标放置提示指令v-tooltip

描述

自定义指令 v-tooltip

• mounted(el, binding)：当元素被挂载到DOM上时，这个钩子会被调用。

  • el 是指令绑定的元素，binding 包含了指令的值，即 binding.value，这里是 clickOutside 字符串。
  • tooltip 变量用于存储创建的提示框元素。

• isOverflowing()：这是一个辅助函数，用于检查元素的文本内容是否超出了其宽度。如果 scrollWidth（元素内容的宽度）大于 clientWidth（元素可视宽度），则返回 true，表示内容溢出。

• createTooltip()：这个函数用于创建提示框。

  • 创建一个新的 div 元素作为提示框，并设置其文本内容为指令的值或元素的文本内容。
  • 设置提示框的样式，包括位置、背景颜色、文字颜色、内边距、边框圆角、层级和最大宽度。
  • 将提示框添加到 document.body 中。
  • 根据元素的位置和大小调整提示框的位置，使其显示在元素的下方。

• 鼠标移入事件：当鼠标移入元素时，会触发 mouseenter 事件。

  • 如果元素的内容溢出，即 isOverflowing() 返回 true，则调用 createTooltip() 创建提示框。

• 鼠标移出事件：当鼠标移出元素时，会触发 mouseleave 事件。

  • 如果存在提示框，则将其从 document.body 中移除，并设置 tooltip 为 null。

鼠标移入元素，显示提示内容，如使用中所描述，会提示字符串clickOutside

使用

<div v-tooltip="clickOutside"><input />
</div>

代码

/* 鼠标提示信息 */app.directive('tooltip', {mounted(el, binding) {let tooltip;// 检查内容是否超出标签宽度const isOverflowing = () => {console.log(el, el.scrollWidth, el.clientWidth, el.scrollWidth > el.clientWidth)return el.scrollWidth > el.clientWidth;};// 创建工具提示const createTooltip = () => {tooltip = document.createElement('div');tooltip.textContent = binding.value || el.textContent;tooltip.style.position = 'absolute';tooltip.style.backgroundColor = '#333';tooltip.style.color = '#fff';tooltip.style.padding = '5px 10px';tooltip.style.borderRadius = '4px';tooltip.style.zIndex = '1000';tooltip.style.maxWidth = `${el.clientWidth * 2}px`; // 限制为元素宽度document.body.appendChild(tooltip);const rect = el.getBoundingClientRect();tooltip.style.top = `${rect.bottom + 5}px`; // 调整到元素下方5px处tooltip.style.left = `${rect.left + 10}px`;};// 鼠标移入事件el.addEventListener('mouseenter', () => {if (isOverflowing()) {createTooltip();}});// 鼠标移出事件el.addEventListener('mouseleave', () => {if (tooltip) {document.body.removeChild(tooltip);tooltip = null;}});}});

拓展

【10分钟学习Vue自定义指令开发】复制指令v-copy

【10分钟学习Vue自定义指令开发】元素变化指令

【10分钟学习Vue自定义指令开发】鼠标放置提示指令