tooltip 动态控制显示、隐藏

需求：在标签中，内容过长，即超出标签宽度添加tooltip，否则不添加

思路： 1、利用tooltip 的disabled 的 属性动态控制

            2、用标签的 scrollWidth（实际占的宽度） 和 clientWidth（容器实际宽度）

            3、给标签设置固定宽高，且超出隐藏、单行（不换行）,多行（固定行）、添加省略号

1、html 设置tooltip 的属性

           <span class="value mySpan">

                <el-tooltip

                  :disabled="tooltipIsShow"

                  effect="dark"

                  :content="这里是一些可能会超出容器高度的内容"

                  placement="top-start"

                >

                  <span @mouseenter="isShowTooltip"> 这里是一些可能会超出容器高度的内容</span>

                </el-tooltip>

              </span>

 2、js 判断是否需要展示 tooltips

    isShowTooltip() {

      this.$nextTick(() => {

        const spanHtml = document.getElementsByClassName('mySpan')

       // 实际宽度  >  容器宽度 显示 tooltips

        if (spanHtml.scrollWidth > spanHtml.clientWidth) {

          this.tooltipIsShow = false

        } else {

          this.tooltipIsShow = true

        }

      })

    },

3、css 设置宽度，限制单行，超出用省略号

     .value {

              display: inline-block;

              width: 200px;

              height: 18px;

              white-space: nowrap;

              overflow: hidden;

              text-overflow: ellipsis;

       }