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

蜗牛 互联网技术资讯 2022-06-02 40 0

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

    1. 介绍

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

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

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

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

    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显示”有了更深的了解,不妨来实际操作一番吧!这里是蜗牛博客网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    评论