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

描述

自定义指令 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 中移除,并设置 tooltipnull

鼠标移入元素,显示提示内容,如使用中所描述,会提示字符串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自定义指令开发】鼠标放置提示指令

相关推荐
向阳2566 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd10 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI10 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见12 分钟前
浅拷贝与深拷贝
前端
艾克马斯奎普特12 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~16 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪17 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡18 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克20 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
你的人类朋友20 分钟前
JS严格模式,启动!
javascript·后端·node.js