element Tooltip 文字提示使用方法之列表移上去的效果

介绍:Tooltip的进阶用法,当列表数据超过父元素宽度就显示,没有超过则不显示

首先看一下效果图用法

 具体代码如下:

html

 <div class="container">
    <div class="box">
      <ul class="list">
        <li v-for="(item, index) in list" :key="item">
          <div class="list-item pr20">
            <el-tooltip
              class="item"
              :content="item ? item : ''"
              :disabled="isShowTooltip"
              effect="dark"
              placement="top"
            >
              <div class="over-flow" @mouseover="onMouseOver(index)">
                <span :ref="'noticeName' + index">{{ item }}</span>
              </div>
            </el-tooltip>
          </div>
        </li>
      </ul>
    </div>
  </div>

在data中定义的数据:

 export default {
    data() {
      return {
        list: [
          '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
          '我是数据111111111111111111111111111111111111111111111111111',
          '组织培训结束时间',
          '培训学时',
          '承办部门',
        ],
        isShowTooltip: true,//控制Tooltip显示隐藏
      }
    },
    methods: {
      onMouseOver(index) {
        // eval('this.$refs.noticeName' + index)[0]   寻找鼠标移上去的节点
        let parentWidth = eval('this.$refs.noticeName' + index)[0].parentNode
          .offsetWidth //父元素宽度
        let contentWidth = eval('this.$refs.noticeName' + index)[0].offsetWidth //子元素宽度
        //鼠标移上某个节点,当子元素宽度大于父元素宽度就显示文字提示
        if (contentWidth > parentWidth) {
          this.isShowTooltip = false
        } else {
          this.isShowTooltip = true
        }
      },
    },
  }

最后在css中控制样式(这里注意必须要给最外面的盒子一个宽度)

 .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }
  .box {
    width: 500px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .list {
    width: 100%;
  }
  .list-item {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    border: 1px solid #ccc;
    &:hover {
      color: #00aae2;
      cursor: pointer;
    }
    .over-flow {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
    }
  }

常见的几个计算宽度的属性:

  * offsetWidth 水平方向 width + 左右padding + 左右border-width

  * offsetHeight 垂直方向 height + 上下padding + 上下border-width

  * clientWidth 水平方向 width + 左右padding

   * clientHeight 垂直方向 height + 上下padding