vue+el-tooltip文本是否溢出显示省略号展示提示框

<template>

  <!-- 创建 -->

  <div class="resource-warp-box">

    <div class="containter">

      <div class="model-square">

        <div class="model-box" v-for="(item, index) in modelList" :key="index">

            <div class="top-logo" v-if="index === 0">

                <!-- 右上角图标（根据自身需求展示） -->

                <img :src="require(`@/assets/images/topLogo1.png`)" alt="">

            </div>

            <div class="top-logo" v-else>

                <!-- 右上角图标（根据自身需求展示） -->

                <img :src="require(`@/assets/images/topLogo2.png`)" alt="">

            </div>

          <div class="top-box">

                <!-- 左上角图标（根据自身需求展示） -->

            <img

              :src="require(`@/assets/images/${item.img}`)"

              alt=""

              class="img"

            />

            <span class="title">{{ item.title }}</span>

          </div>

          <el-tooltip

            :content="item.content"

            placement="bottom"

            effect="light"

            popper-class="bottom-tooltip"

            v-if="showTooltip"

          >

            <div class="content" @mouseenter="isShowTooltip($event)">

              {{ item.content }}

            </div>

          </el-tooltip>

          <div class="content" @mouseenter="isShowTooltip($event)" v-else>

              {{ item.content }}

            </div>

          <div class="line"></div>

          <div class="bottom-box">

            <div class="detail-btn btn">查看详情</div>

            <div class="cut-line"></div>

            <div class="experience-btn btn">立即体验</div>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      modelList: [

        {

          img: "chat.png",

          title: "弈Chat",

          content:

            "希施玛AIGC系列是基于希施玛AIGC技术服务平台，开发的一系列AIGC应用及服务模块，通过精准财经数据、大语言模型、AIGC内容生成技术等，为金融财经领域工作者提供专业、精准、权威的智能对话、内容生成及智能辅助等个性化服务。实现x10倍降本增效，同时可按需定制，满足用户多样性及个性化的需求。"

        },

        {

          img: "questions.png",

          title: "通义千问-开源版-7B",

          content:

            "通义千问对外开源的7B规模参数量的经过人类指令对齐的chat模型，模型支持 8k tokens上下文，API限定用户输入为6k Tokens。"

        },

        {

          img: "otherModel.png",

          title: "Yi-Large-RAG",

          content:

            "Yi-Large-RAG是零一万物推出的高阶模型服务，带有实时联网搜索能力。模型会判断是否需要最新的网络信息，进而获取最新信息后进行综合推理，输出答案。适用于需要结合实时信息，进行复杂推理、文本生成等场景。支持16K文本长度"

        },

        {

          img: "otherModel.png",

          title: "ChatGLM3-开源版-6B",

          content:

            "智谱AI出品的大规模语言模型，ChatGLM 系列最新一代的开源模型，在保留了前两代模型对话流畅、部署门槛低等众多优秀特性的基础上，支持更好的性能和效果，支持输入输出token合计是7500，单轮最大输出token为1500，单轮最大输入token为6000。"

        },

      ],

      showTooltip: false, // 是否展示浮框

    };

  },

  methods: {

    // 判断是否展示文本浮框

        isShowTooltip(event) {

        const ev = event.target;

        const evHeight = ev.scrollHeight;

        const contentHeight = ev.clientHeight;

        if (evHeight > contentHeight) {

            // 实际宽度 > 可视宽度  文字溢出

            this.showTooltip = true;

        } else {

            // 否则为不溢出

            this.showTooltip = false;

        }

    },

  }

};

</script>

<style lang="scss">

// 修改element tooltip组件样式（此处不能scoped，不然不生效）

.bottom-tooltip.el-tooltip__popper {

    width: 320px;

    border-radius: 10px;

  background-color: #ffffff; /* 修改背景色 */

  color: #666666; /* 修改文本颜色 */

    box-shadow: 0px 1px 20px 0px rgba(36, 36, 41, 0.1);

    font-weight: 400;

    line-height: 20px;

    font-size: 12px;

    .popper__arrow {

    border-width: 0px;

    }

}

.el-tooltip__popper.is-light {

    border: none !important;

}

</style>

<style lang="scss" scoped>

.resource-warp-box {

  margin: 0 12px 10px 20px;

  overflow: hidden;

  min-width: 1200px;

  .containter {

    height: calc(100vh - 120px);

    overflow: auto;

    .model-square {

      display: flex;

        flex-wrap: wrap;

        align-content: space-between;

        margin-top: 5px;

      .model-box {

         width: calc(33.3333% - 15px);

        box-sizing: border-box;

        background: #ffffff;

        border-radius: 10px;

        padding: 0 20px;

        border: 1px solid #ffffff;

        margin-bottom: 20px;

        margin-right: 20px;

        position: relative;

        &:nth-child(3n) {

            margin-right: 0;

        }

        &:hover {

          box-shadow: 0px 1px 20px 0px rgba(36, 36, 41, 0.1);

          border: 1px solid #1161e4;

        }

        .top-logo {

            position: absolute;

            right: -1px;

            top: -5px;

        }

        .top-box {

          display: flex;

          align-items: center;

          margin: 20px 0;

          .img {

            width: 40px;

            height: 40px;

          }

          .title {

            font-weight: 500;

            font-size: 16px;

            color: #333333;

            margin-left: 16px;

          }

        }

        .content {

            width: 100%;

            font-weight: 400;

            line-height: 20px;

            font-size: 12px;

            color: #999999;

            overflow: hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-box-orient: vertical;

            -webkit-line-clamp: 2;

        }

        .line {

          height: 1px;

          background: #f0f3f5;

          margin-top: 21px;

        }

        .bottom-box {

          display: flex;

          align-items: center;

          margin: 10px 0;

          .btn {

            font-weight: 400;

            font-size: 12px;

            color: #666666;

            cursor: pointer;

            width: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

          }

          .detail-btn {

            &:hover {

              color: #1161e4;

            }

          }

          .cut-line {

            width: 1px;

            height: 30px;

            background: #f0f3f5;

          }

          .experience-btn {

            &:hover {

              color: #1161e4;

            }

          }

        }

      }

    }

  }

}

</style>