vue Element UI擴充套件內容過長使用tooltip顯示

2022-06-01 18:00:41

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顯示示的詳細內容，更多關於vue Element UI內容過長tooltip顯示的資料請關注it145.com其它相關文章！

vue Element UI擴充套件內容過長使用tooltip顯示

目錄

1. 介紹

2. element-ui(vue2版本)

2.1 註冊指令

1) akTooltipAutoShow.js

2.2 使用

3. element-plus(vue3版本)

3.1 註冊指令

1) akTooltipAutoShow.js

2) 進行區域性或全域性註冊

3.2 使用

熱門文章