vue Element UI扩展内容过长如何使用tooltip显示

vue Element UI扩展内容过长如何使用tooltip显示

本篇内容主要讲解“vue Element UI扩展内容过长如何使用tooltip显示”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue Element UI扩展内容过长如何使用tooltip显示”吧!

1. 介绍

Tooltip常用于展示鼠标 hover 时的提示信息。

而在实际过程中，有这么一个需求：只有文字内容排不下，出现省略号，才需要显示tooltip的提示内容。

本文章的思路是通过一个自定义指令实现如下效果：姓名字段过长时才显示tooltip

2. element-ui(vue2版本)

2.1 注册指令

1) akTooltipAutoShow.js

说明：注册了一个名称为 'ak-tooltip-auto-show' 的指令。会根据内容进行判断是否展示tooltip。

import Vue from 'vue';  import { on, off, getStyle } from 'element-ui/src/utils/dom';  /**   * ak-tooltip-auto-show   * 当text没有被折叠时，不显示tooltip   */  Vue.directive('ak-tooltip-auto-show', {    inserted: function (el, binding, vnode) {      el.addEventListener('mouseenter', function (e) {        let defalutSilent = !!Vue.config.silent;        Vue.config.silent = true;        vnode.componentInstance.disabled = true;        const range = document.createRange();        range.setStart(el, 0);        range.setEnd(el, el.childNodes.length);        const rangeWidth = Math.round(range.getBoundingClientRect().width);        const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);        if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {          vnode.componentInstance.disabled = false;        }        Vue.config.silent = defalutSilent;      });    }  });

2.2 使用

说明：使用<el-tooltip v-ak-tooltip-auto-show>包囊展示的内容。

　　<div class="details-inner__row">      <span class="details-inner__row-name">姓名:</span>      <el-tooltip placement="top" effect="dark" :content="item.name" v-ak-tooltip-auto-show>          <span class="details-inner__row-value">{{item.name}}</span>      </el-tooltip>  </div>  // css  .details-inner__row-value {  　　width: 80%;  　　display: inline-block;  　　white-space: nowrap;  　　text-overflow: ellipsis;  　　overflow: hidden;  }

3. element-plus(vue3版本)

3.1 注册指令

1) akTooltipAutoShow.js

说明：

注册了一个名称为 'ak-tooltip-auto-show' 的指令。会根据内容进行判断是否展示tooltip。

注意：

因为element-plus与之前的element-ui不一样，在element-plus(vue3版本)中是 <展示组件>包含<el-tooltip>的，所以代码中需要在<展示组件>内查找<el-tooltop>。

import { getStyle } from 'element-plus/lib/utils/dom/index';  /**   * show-overflow-tooltip for text   * 当text没有被折叠时，不显示tooltip   */  const akTooltipAutoShow = {    created(el, binding, vnode) {      let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip');      if (tooltipNode) {        let { content } = tooltipNode.props;        if (content && ['添加', '编辑', '删除','查看'].includes(content)) {          el.addEventListener('click', function (e) {            let defalutDisabled = tooltipNode.component.props.disabled;            if (!defalutDisabled) {              tooltipNode.component.props.disabled = true;              setTimeout(() => {                tooltipNode.component.props.disabled = defalutDisabled;              }, 200);            }          });        } else {          el.addEventListener('mouseenter', (e) => {            tooltipNode.component.props.disabled = true;            const range = document.createRange();            range.setStart(el, 0);            range.setEnd(el, el.childNodes.length);            const rangeWidth = Math.round(range.getBoundingClientRect().width);            const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);            if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {              tooltipNode.component.props.disabled = false;            }          });        }      }    }  };  export default akTooltipAutoShow;

2) 进行局部或全局注册

// main.js  const app = createApp(App);  import akTooltipAutoShow from './akTooltipAutoShow.js';  app.directive('ak-tooltip-auto-show', akTooltipAutoShow);

3.2 使用

说明：因element-plus(vue3版本)本身不提供 root element，所以需要把此指令放到<el-tooltip>的父级组件。

<div class="details-inner__row">  　　<span class="details-inner__row-name">姓名:</span>  　　<span class="details-inner__row-value" v-ak-tooltip-auto-show>  　　　　<el-tooltip placement="top-end" :content="item.name">{{item.name}}</el-tooltip>  　　</span>  </div>  // css  .details-inner__row-value {  　　width: 80%;  　　display: inline-block;  　　white-space: nowrap;  　　text-overflow: ellipsis;  　　overflow: hidden;  }

到此，相信大家对“vue Element UI扩展内容过长如何使用tooltip显示”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[