文字超出用省略号（单行/多行）(vue3)

 

1组件TooltipText.vue

<template>
  <div ref="tooltipParentRef">
    <el-tooltip
      effect="dark"
      placement="top"
      :enterable="false"
      :show-after="200"
      :offset="10"
      :popper-class="props.textTooltipPopperClass"
      :content="props.content"
      :disabled="disabledTooltip"
    >
      <span
        :class="['tooltip_text', textClassName, !disabledTooltip ? textEllipsisClassName : '']"
        :style="{ color: color }"
        >{{ props.content }}</span
      >
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue"
const props = defineProps({
  content: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: ""
  },
  line: {
    type: Number,
    default: 1
  },
  textClassName: {
    type: String,
    default: ""
  },
  textEllipsisClassName: {
    type: String,
    default: ""
  },
  textTooltipPopperClass: {
    type: String,
    default: "default_text-tooltip_popper"
  },
  color: {
    type: String,
    default: ""
  }
})
const disabledTooltip = ref(true)
const tooltipParentRef = ref()
// 判断当前行文本是否移除
const isEllipsisActive = () => {
  // getClientRects详细介绍以及案例：https://blog.csdn.net/HeMister/article/details/137640173
  const DOMRectList = tooltipParentRef.value.children[0].getClientRects()
  // DOMRectList.length > = props.line 说明超出显示的行数
  return DOMRectList.length <= props.line
}
watch(
  () => props.content,
  () => {
    updateStatus()
  },
  {
    immediate: true
  }
)
function updateStatus() {
  setTimeout(() => {
    disabledTooltip.value = isEllipsisActive()
  })
}
defineExpose({
  updateStatus
})
</script>
<style lang="scss" scoped>
.tooltip_text {
  word-break: break-all;
}
</style>

2 使用

<TooltipText
                class="roleName"
                :class="currentRoleId === item.roleId ? 'nameActive name' : 'name'"
                :content="item.name"
                :line="1"
                :textClassName="`content`"
                :textEllipsisClassName="`remark`"
              />


<style>

.roleName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 .nameActive {
    color: #477fff !important;
  }

.name {
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #303133;
            width: 150px;
          }

</style>