vue文字溢出...显示el-tooltip展示

天高任鸟飞dyz

已于 2023-09-28 17:41:33 修改

阅读量832

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

于 2023-09-13 17:34:50 首次发布

本文链接：https://blog.csdn.net/yzding1225/article/details/132859626

版权

Vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html

          <div class="colony-list">
            <div
              v-for="(item, index) in colonyList"
              :key="index"
              :style="colonyId == item.id && 'background-color: #f2f3f7;'"
              @click="colonyClick(item.id)"
            >
              <el-tooltip
                :content="item.name"
                effect="light"
                placement="top"
                :disabled="isTooltip"
              >
                <span @mouseenter="visibilityChange($event)">
                  {{ item.name }}
                </span>
              </el-tooltip>
            </div>
          </div>

  const isTooltip = ref(false)

  const visibilityChange = (event) => {
    const ev = event.target
    const evWeight = ev.scrollWidth
    const contentWeight = ev.clientWidth
    console.log(ev, evWeight, contentWeight, 1)
    if (evWeight > contentWeight) {
      // 实际宽度 > 可视宽度  文字溢出
      isTooltip.value = false
    } else {
      // 否则为不溢出
      isTooltip.value = true
    }
  }

css

      .colony {
        margin-top: 10px;
        overflow: auto;
        &-list {
          > div {
            height: 36px;
            font-size: 14px;
            color: #404a62;
            line-height: 36px;
            padding: 0 25px;
            cursor: pointer;

            > span {
              display: block;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap; // 默认不换行；
            }
          }
        }
      }