PC文本超出变为省略号，同时鼠标移入显示文本详情

前端小菜鸡～

已于 2023-04-07 17:38:11 修改

阅读量211

点赞数

文章标签：前端 html javascript

于 2023-04-07 17:28:13 首次发布

本文链接：https://blog.csdn.net/m0_75013578/article/details/130016952

版权

首先封装一个TextOverTooltip.vue,然后在需要的页面引入改页面

import TextOverTooltip from "@/components/TextOverTooltip.vue";

components: {

TextOverTooltip,

本文章是今天看其他大佬写的，但是找不到他的文章了，他忘记写components。如果作者本人看到请联系我我加上转载链接。

<template>
  <div class="text-over-tooltip-components">
    <el-tooltip
      :effect="effect"
      :disabled="isDisabledTooltip"
      :content="content"
      :placement="placement"
    >
      <div
        class="ellipsis"
        :class="className"
        @mouseover="onMouseOver(refName)"
      >
        <span :ref="refName">{{ content }}</span>
      </div>
    </el-tooltip>
  </div>
</template>
  
  <script>
export default {
  name: "TextOverTooltip",
  props: {
    // 显示的文字内容
    content: String,
    // 设置父元素的样式：比如宽度字体等，需可以自己在组件内部配置样式比如字体大小20：fs20
    className: String,
    // 子元素标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: String,
    // 默认提供的主题 dark/light
    effect: {
      type: String,
      default: () => {
        return "dark";
      },
    },
    // Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
    placement: {
      type: String,
      default: () => {
        return "bottom";
      },
    },
  },
  data() {
    return {
      isDisabledTooltip: true, // 是否需要禁止提示
    };
  },
  methods: {
    // 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
    onMouseOver(str) {
      let parentWidth = this.$refs[str].parentNode.offsetWidth;
      let contentWidth = this.$refs[str].offsetWidth;
      // 判断是否禁用tooltip功能
      this.isDisabledTooltip = contentWidth <= parentWidth;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.text-over-tooltip-components {
  /* 文字超出宽度显示省略号 单行 */
  .ellipsis {
    width: 138px;
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 自定义样式 */
  .fs20 {
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    color: #009a29;
    margin-left: 24px;
  }
}
</style>

                     <text-over-tooltip
                        refName="testName1"
                        className="fs20"
                        :content="val.wjxxpjContent"
                      ></text-over-tooltip>