Element-plus

忠告: 最好鎖定版本, 免得更新更出 BUG 來了

遇到兩次了, 沒鎖定 element-plus 版本, 打包后樣式亂了, 邏輯變了…

el-drawer 設置 modal=“false” 后, 遮罩元素仍存在, 點不了空白的地方

有兩個思路:

1. 通過 modal-class 把遮罩層樣式改了, 讓它只是看起來不顯示, 這樣 close-on-click-modal 應該能生效
   這個方案改動小, 但是滿足不了產品需求 — “點擊其他表格行時, 可切換側滑頁內容”, 于是引入 vueuse 的 onClickOutside 做了方案 2
2. 方案2, 步驟如下:
   1. 給 drawer 和 modal 加上 pointer-events 相關 class , 讓點擊可以穿透遮罩層
   2. 使用 onClickOutside, 傳入 handler 函數關閉 drawer , 傳入 options.ignore , 指定忽略表格行(側滑頁的入口元素)的 css 選擇器
   3. 如果 drawer 內部有彈框, 可以加上彈框遮罩的 class 選擇器, 避免點擊彈框時把 drawer 也關了

el-tree 大數據量時接收 check-change 事件報錯導致涉及多個節點的操作沒執行完畢

背景:

數據量大的時候(選中一個底下有很多子級的節點)check-change 事件不斷觸發, 到了 100 出頭時, 接收事件處理的方法就一直報錯了(發版后不報錯, 但邏輯同樣受影響), 不會處理后續邏輯了

定位:

本地運行開發環境里有報錯, 錯誤信息里說的是數據更新影響到渲染了, 那就減少相關操作吧

解決

于是在接收處首先 await nextTick() 一下, 攢夠一波了一起執行后續邏輯 -> 更新數據 -> 視圖更新

如果之后還有問題, 那再整 setTimeout , 隊列之類的吧, 或者干脆不用 check-change 事件了

el-table 表頭 show-overflow-tooltip 無效解決辦法 / 設置 class 控制全局超長隱藏, 以 el-tooltip 顯示全部內容

背景:

UI 要求表頭也要超長隱藏, 鼠標移入 tooltip 顯示全局內容

思路:

之前的項目是用 render-header 實現的, 新項目用 render-heade 少, 覺得逐個表格寫 render-header 控制顯隱/ title 屬性太麻煩, 于是復制 element-plus 的 show-overflow-tooltip 部分相關代碼, 實現設置 class “showOverflowTooltip” 即可超長顯示 tooltip (設置 class 就行, 跟表格沒關系, 普通 div 設置了也能顯示), 原理為 — 全局監聽 .showOverflowTooltip mouseover , 以虛擬 ref 顯示全局 el-tooltip ,

具體代碼

// APP.VUE<template><!-- ... --><!-- 全局 tooltip --><el-tooltipv-model:visible="visible":content="content"placement="top-start"effect="dark"trigger="hover":show-after="500"virtual-triggering:virtual-ref="triggerRef"></el-tooltip>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { checkIsOverflow } from 'src/utils/dom.js';// ...// 全局, 以虛擬 ref 觸發指定 class (.showOverflowTooltip) 鼠標移入顯示 overflow tooltip
// 手動控制顯隱(暫時沒用到)
const visible = ref(false);
// tooltip 內容
const content = ref('');
// 虛擬 ref 指定 DOM
const triggerRef = ref(null);
// 全局監聽 mouseover 鼠標移入, 控制虛擬 ref
const globalOnMouseOver = e => {const targetEl = e.target;// 鼠標移入的元素包含特定 class + 內容超出, 則設置虛擬 ref + content (popper 以 trigger: hover 顯示)if (targetEl.classList.contains('showOverflowTooltip') && checkIsOverflow(targetEl)) {content.value = targetEl.innerText || targetEl.textContent;triggerRef.value = targetEl;}
};// 添加事件監聽
onMounted(() => {document.getElementById('vue應用根元素id').addEventListener('mouseover', globalOnMouseOver);
});// 移除事件監聽
onBeforeUnmount(() => {document.getElementById('vue應用根元素id').removeEventListener('mouseover', globalOnMouseOver);
});
</script><style lang="scss">.showOverflowTooltip, .showOverflowTooltip > * {max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>

// src/utils/dom.js// 判斷是否 text-overflow
// 參考 element-plus : https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/render-helper.ts
export const checkIsOverflow = (el) => {// use range width instead of scrollWidth to determine whether the text is overflowing// to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3const range = document.createRange();range.setStart(el, 0);range.setEnd(el, el.childNodes.length);/** detail: https://github.com/element-plus/element-plus/issues/10790*  What went wrong?*  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:*    - Expected: 188*    - Actual: 188.00000762939453*/let { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();const offsetWidth = rangeWidth - Math.floor(rangeWidth);const { width: cellChildWidth, height: cellChildHeight } = el.getBoundingClientRect();if (offsetWidth < 0.001) {rangeWidth = Math.floor(rangeWidth);}const offsetHeight = rangeHeight - Math.floor(rangeHeight);if (offsetHeight < 0.001) {rangeHeight = Math.floor(rangeHeight);}const { top, left, right, bottom } = getPadding(el);const horizontalPadding = left + right;const verticalPadding = top + bottom;if (rangeWidth + horizontalPadding > cellChildWidth ||rangeHeight + verticalPadding > cellChildHeight ||el.scrollWidth > cellChildWidth) {return true;}return false;
};
// 獲取 el padding
export const getPadding = (el) => {const style = window.getComputedStyle(el, null);const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;return {left: paddingLeft,right: paddingRight,top: paddingTop,bottom: paddingBottom};
};export default {checkIsOverflow,getPadding
};