【vue+Element】el-tooltip自适应宽度显示与隐藏

棒棒@糖

已于 2024-04-12 11:47:00 修改

阅读量521

点赞数 6

分类专栏： Vue+Element 文章标签： vue.js elementui javascript

于 2024-04-11 11:04:10 首次发布

本文链接：https://blog.csdn.net/Sylviaswefa/article/details/137518160

版权

Vue+Element 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue+Element 项目中使用el-tooltip时，想要el-tooltip能够自适应宽度，当页面放大能够展示完整时隐藏提示文字，当页面缩小文本展示不全时再显示提示文字，展示信息效果如下：

显示完整效果（鼠标触摸无提示文字）：

显示不全效果（鼠标触摸会有提示文字）：

HTML结构：

<el-row>
   <el-col :span="8" class="my-col">
      <div>姓名：</div>
      <el-tooltip
        effect="dark"
        :content="name"
        placement="top"
        :disabled="showTooltip"
      >
        <div class="overflow" @mouseover="onMouseOver('name')">
          <span class="label" :ref="'name'">{{ name }}</span>
        </div>
      </el-tooltip>
    </el-col>
    <el-col :span="8" class="my-col">
      <span class="value">年龄：</span>
      <span class="label">{{ age }}</span>
    </el-col>
    <el-col :span="8" class="my-col">
      <div class="value">微信号：</div>
      <el-tooltip
        effect="dark"
        :content="wxNumber"
        placement="top"
        :disabled="showTooltip"
      >
        <div class="overflow" @mouseover="onMouseOver('wxNumber')">
          <span class="label" :ref="'wxNumber'">{{ wxNumber }}</span>
        </div>
      </el-tooltip>
    </el-col>
    <el-col :span="8" class="my-col">
      <div class="value">所在区域：</div>
      <el-tooltip
        effect="dark"
        :content="area"
        placement="top"
        :disabled="showTooltip"
      >
        <div class="overflow" @mouseover="onMouseOver('area')">
          <span class="label" :ref="'area'">{{ area }}</span>
        </div>
      </el-tooltip>
    </el-col>
    <el-col :span="8" class="my-col">
      <div class="value">详细地址：</div>
      <el-tooltip
        effect="dark"
        :content="address"
        placement="top"
        :disabled="showTooltip"
      >
        <div class="overflow" @mouseover="onMouseOver('address')">
          <span class="label" :ref="'address'">{{ address }}</span>
        </div>
      </el-tooltip>
   </el-col>
</el-row>

js代码：

export default {
  data() {
    return {
      showTooltip: false
    }
  },
  methods: {
    // 鼠标移动到元素上检验内容超出显示tooltip提示文字
    onMouseOver(refName) { 
      this.showTooltip = false
      const node = this.$refs[refName]
      const parentWidth = node.parentNode.offsetWidth
      const contentWidth = node.offsetWidth
      this.showTooltip = contentWidth <= parentWidth
    }
  }
}

样式代码：

<style lang="scss" scoped>
.my-col {
  display: flex;
  margin-bottom: 12px;
  padding-right: 8px;
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>