1.需求:需要实现文本单行显示,超出时,使用省略号,划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取,只有溢出文本鼠标滑过时显示全部文本,没有溢出的则不需要。

2.实现:

第一步:首先要判断文本是否溢出

这里网上可以找到很多方法,我是用scrollWidth去拿到实际文本长度,跟clientWidth文本可视宽度作比较。需要注意的是我遇到了一个问题,即

判断文本溢出之前一定要使用单行文件溢出显示省略号的css,并且要加在tooltip内部要溢出隐藏的span上,不然scrollWidth和clientWidth会一直为0

 onMouseOver(event) {
      const ev = event.target;
      const evWeight = ev.scrollWidth;
      const contentWidth = ev.clientWidth;
      if (evWeight > contentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    <el-row v-for="(row, rowIndex) in djnumberOfRows" :key="rowIndex">
              <el-col
                v-for="(column, colIndex) in row.length"
                :key="colIndex"
                :span="
                  calculateSpan(row, rowIndex, djnumberOfRows.length, colIndex)
                "
              >
                <template v-if="row[colIndex]">
                  <el-form-item class="radioClass" :label="row[colIndex].name">
                    <el-tooltip
                      :content="djForm ? djForm[row[colIndex].fieldskey] : ''"
                      :disabled="isShowTooltip"
                      placement="top"
                    >
                      <div
                        @mouseover="onMouseOver($event)"
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        {{ djForm ? djForm[row[colIndex].fieldskey] : '' }}   //之前我在这里包了一层span,是错误的,会导致拿到的不准,有的是0,有的地方不是,因为span有范围。为什么会在这加一层span,用div,因为省略号
                      </div>
                    </el-tooltip>
                  </el-form-item>
                </template>
              </el-col>
            </el-row>

补充:(未试)

methods: {
  onMouseOver (str) { // 内容超出,显示文字提示内容
      const tag = this.$refs[str]
      const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth

  }
}

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
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 8 个月前
Logo

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

更多推荐