vue 不固定宽度文字超出显示...鼠标移入浮层显示全文，模拟title浮层方法

最新推荐文章于 2023-12-11 16:29:35 发布

雪莲的博客

最新推荐文章于 2023-12-11 16:29:35 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/ZHIYUANfL/article/details/80175355

Vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用 CSS3 实现文字超出容器时显示省略号，并通过 JavaScript 在鼠标悬停时显示完整文本。具体实现包括测量文本宽度、创建浮动层及交互逻辑。

先说说思路：

1、不固定宽度文字超出显示...，用的css3 overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

2、文字超出的地方鼠标移入显示全文。我的思路是这样的，先获取容器的宽度、字号、全部文字，把获取的全部文字放到一个动态生成的span中，给span设置字号为容器的字号，再获取出来span的长度，容器宽度小于span宽度的情况下会显示浮层展示全文。

3、事件分为鼠标移入，移动，移出三个步骤。这里鼠标移入我用的是mouseover

下面上代码干货

//文字超出部分显示...鼠标经过浮层显示全部文字
export const mouseover = ($event) => {
  alert(1)
    let dom = $event.target,
      style = window.getComputedStyle ? window.getComputedStyle(dom, '') : dom.currentStyle,
      width = dom.clientWidth,//容器宽度
      paddingRight = style.paddingRight,//右padding
      paddingLeft = style.paddingLeft,//左padding
      marginLeft = style.marginLeft,//左margin
      marginRight = style.marginRight,//左margin
      boxWidth = width-parseInt(paddingRight)-parseInt(paddingLeft)-parseInt(marginLeft)-parseInt(marginRight),
      fontSize = style.fontSize,
      text = dom.innerHTML,
      span = document.createElement("span"),
      left = $event.clientX,
      top = $event.clientY;
      span.style.cssText = `font-size:12px;height:0;overflow:hidden;`;
      span.setAttribute('id', 'span');
      document.body.appendChild(span);
      document.querySelector('#span').innerHTML = text;
      let spanWidth = span.offsetWidth;
      document.body.removeChild(span);
  if (spanWidth > boxWidth) {
    let bgObj = document.createElement("div");
    bgObj.style.cssText = `position:absolute;top:${top+5}px;left:${left}px;color:#fff;background:#333;max-width:400px;border-radius:5px;padding:10px;display:inline-block;font-size:12px;z-index:9999`;
    bgObj.setAttribute('id', 'bgObj');
    document.body.appendChild(bgObj);
    document.querySelector('#bgObj').innerHTML = text;
  }
  
}
//鼠标移出浮层消失
export const mouseout = ($event) => {
  let bgObj = document.querySelector('#bgObj');
  if (bgObj) {
    document.body.removeChild(bgObj);
  }
}
//鼠标移动浮层移动
export const mousemove = ($event) => {
  let left = $event.clientX,
    top = $event.clientY,
    bgObj = document.querySelector('#bgObj');
  if (bgObj) {
    bgObj.style.top = (top + 10) + 'px',
      bgObj.style.left = left + 'px';
  }
}

组件中是这样用的

 <li v-for="(company,index) in companys" :key="index" @mouseover="mouseover()" @mouseout="mouseout()" 
@mousemove ="mousemove()">{{company.name}}</li>