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

不吃香菜的猪2023-08-03 19:15

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

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

javascript 复制代码

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 中

javascript 复制代码

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 属性即可

javascript 复制代码

<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>