建立一个网站的费用,宜昌营销网站建设,大连line公司,珠海建设企业网站的公司描述
自定义指令 v-tooltip mounted(el, binding)#xff1a;当元素被挂载到DOM上时#xff0c;这个钩子会被调用。 el 是指令绑定的元素#xff0c;binding 包含了指令的值#xff0c;即 binding.value#xff0c;这里是 clickOutside 字符串。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-tooltipclickOutsideinput /
/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自定义指令开发】鼠标放置提示指令
