公共tooltip组件

最新推荐文章于 2024-11-07 16:25:20 发布

你的骑士M

最新推荐文章于 2024-11-07 16:25:20 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_42360279/article/details/128655864

前端专栏收录该内容

5 篇文章

订阅专栏

该文章介绍了一个使用Vue.js编写的公共Tooltip组件，旨在处理文本内容超出显示的问题。组件通过isShowTooltip函数判断内容是否超过指定宽度，并据此控制Tooltip的显示。组件内包含了元素定位、文本溢出隐藏和自定义样式等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公共tooltip组件，超出显示

<!-- 公共tooltip组件 -->
<template>
  <el-tooltip
    :disabled="controlElToop"
    :content="name"
    placement="top"
    :enterable="false"
  >
    <div
      class="researcher-name"
      :style="{width: boxWidth, textAlign: textAlign}"
    >
      <div
        ref="empty"
        class="empty"
      >
        {{ name }}
      </div>
      <span ref="contentVal">{{ name }}</span>
    </div>
  </el-tooltip>
</template>

<script>
import { isShowTooltip } from '@/utils/validate'

export default {
  name: 'KToolTip',
  props: {
    name: {
      type: String,
      default: '',
    },
    textAlign: {
      type: String,
      default: 'right',
    },
    boxWidth: {
      type: String,
      default: '57px',
    },
    width: {
      type: Number || String,
      default: 0,
    },
  },
  /** 初始参数 */
  data () {
    return {
      controlElToop: true,
    }
  },
  /**
   * 生命周期
   */
  mounted () {
    this.controlElToop = !isShowTooltip(this, 'empty', this.width)
  },
}
</script>

<style lang='scss' scoped>

.researcher-name {
  font-size: 14px;
  padding-right: 5px;
  color: #3C4455;
  position: relative;

  .empty {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>

isShowTooltip

/** 验证文本内容是否超出容器，显示提示语 */
export function isShowTooltip (that, refValue, width) {
  return that.$refs[refValue].offsetWidth >= width
}