Element el-table的show-overflow-tooltip

  1. 刚开始用到这个属性的时候还有点好奇，他是如何判断字体超出了容器的宽度，完成鼠标悬浮上去时在超出宽度时显示tooltip，未超出就不显示的功能。
  2. 因为我们经常为了省事使用原生title属性代替tooltip功能，但是我们做出的效果确实，不管是否隐藏鼠标悬浮上去都会显示title的信息，看起来不够“智能”。

如何自己实现

  1. 为了足够通用，我不用Vue不用Element，用div和原生title属性来实现同样的效果。
<!DOCTYPE html>
<html lang="en">
<head>-
    <title>Document</title>
    <style>
        #div{
            width: 100px;
            border: 1px solid #ccc;
        }
        #text{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <button onclick="overflow()">超出宽度</button>
    <div id="div"><div id="text"></div></div>
    <script>
        let div = document.querySelector('#div')
        let span = document.querySelector('#text')
        span.textContent = '超长了'
        if(div.clientWidth < span.scrollWidth){
            div.title = 'title显示了'
        }
        function overflow(){
            span.textContent = '很长很长20cm很长很长很长很长'
            console.log(div.clientWidth, span.scrollWidth)
            if(div.clientWidth < span.scrollWidth){
                div.title = 'title显示了'
            }
        }
    </script>
</body>
</html>
  1. 我们通过判断父容器的clientWidth是否小于文本容器的scrollWidth来判断文本是否隐藏了。再以此决定是否显示title。clientWidth是容器的宽度，scrollWidth是内容的宽度包括超出隐藏的部分。
  2. Element的show-overflow-tooltip也是如此实现的，在渲染的时候，判断文本容器是否超出父容器，超出了鼠标悬浮才显示tooltip，否则不显示。
# javascript # 前端
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区