el-tooltip设置文字溢出时展示否则不展示

毛三仙

已于 2023-08-11 17:58:38 修改

阅读量1.3k

点赞数 5

分类专栏： css 后台管理系统文章标签： vue.js 前端 javascript

于 2023-08-02 18:40:28 首次发布

本文链接：https://blog.csdn.net/m0_74149462/article/details/132069073

版权

后台管理系统同时被 2 个专栏收录

60 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

文章介绍了如何修改Element-UI中的El-tooltip组件，使其在文字溢出时自动决定是否显示tooltip。通过添加`overflow`属性并重写`show`方法，实现这一功能，适用于Vue项目中处理文本溢出的提示显示。

摘要由CSDN通过智能技术生成

改写el-tooltip使其支持文字溢出时展示否则不展示，而不是需要使用js设置单独控制

新建 src/utils/rewriteElTooltip.js （一模一样 cv就行）

export default function rewriteElTooltip(el) {
  el.props = {
    ...el.props,
    overflow: Boolean, // 为el-tooltip追加名为'overflow'的props属性
  };
  el.methods = {
    ...el.methods,
    // 重写el-tooltip的show方法
    show() {
      // 如果设置了overflow，则判断文字是否溢出，若未溢出则不显示tooltip
      if (this.overflow) {
        if (this.$el.scrollWidth <= this.$el.clientWidth) return;
      }
      // el-tooltip自带的，保留
      this.setExpectedState(true);
      this.handleShowPopper();
    },
  };
}

main.js 中

import Element, { Tooltip } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import rewriteElTooltip from "@/utils/rewriteElTooltip";
rewriteElTooltip(Tooltip); // 重写el-tooltip的方法 注意一定要放在 Vue.use(ElementUI); 之前
Vue.use(Element);

使用：添加 overflow 属性即可

<el-tooltip
              overflow
              effect="dark"
              :content="
                (formData.diseaseLocation ? formData.diseaseLocation : '') +
                (formData.diseaseInformation ? formData.diseaseInformation : '')
              "
              placement="top-start"
            >
              <div class="dialog-box-title">
                {{ formData.diseaseLocation }}{{ formData.diseaseInformation }}
              </div>
            </el-tooltip>