问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ElementUI Table组件的show-overflow-tooltip超出隐藏是如何实现的？

头像
leo_57a0659233e71
    7261725

    Table组件的show-overflow-tooltip属性，在文本未超出时鼠标悬浮不会显示Tooltip文字提示，文字超出时才显示Tooltip提示。
    elementui是如何实现这个功能的？

    是可以通过js计算包裹文字标签的宽度进行判断最多显示字数！但感觉show-overflow-tooltip应该不是通过这种方式实现的！

    问elementui如何实现show-overflow-tooltip功能？

    element-ui
    阅读 10k
    1 个回答
    得票最新
    头像
    Beiysd
      322

      image
      image
      1.逻辑：在js中判断内容区域是否有隐藏，有隐藏=>鼠标移入则开启tooltip/移出关闭；无隐藏则不执行
      2.源码：

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      typet="text/javascript"
      src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
    ></script>
    <title>Document</title>
    <style>
      .container {
        position: relative;
        width: 500px;
        margin: 0 auto;
        margin-top: 50px;
      }
      .nowarp {
        width: 250px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .show {
        position: absolute;
        top: -50px;
        padding: 4px 8px;
        background: #ccc;
        border-radius: 6px;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="content"></div>
      <div id="tooltip"></div>
    </div>
  </body>
  <script>
    var contentBody = document.getElementById("content");
    var tooltip = document.getElementById("tooltip");
    var listContent = [
      "12132132004564654654544654654564654654654",
      "12132132010000000000000000000",
      "1213213202",
      "1213213202",
      "1213213202",
    ];
    var str = "";
    for (let i = 0; i < listContent.length; i++) {
      str +=
        "<div class='nowarp' onmouseenter={enter(" +
        i +
        ")} onmouseleave={leave(" +
        i +
        ")}>" +
        listContent[i] +
        "</div>";
    }
    contentBody.innerHTML = str;
    var list = $(".nowarp");
    enter = (index) => {
      let height = index * list[index].offsetHeight - 50;
      if (list[index].offsetWidth < list[index].scrollWidth)
        $("#tooltip").removeClass("hidden");
      tooltip.innerHTML =
        "<div id='tooltip" +
        index +
        "' class='show' style='top:" +
        height +
        "px;'>" +
        list[index].innerText +
        "</div>";
    };
    leave = (index) => {
      $("#tooltip").addClass("hidden");
    };
  </script>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题