diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 1deb23f53ad..d3ce93e38ce 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -11,6 +11,7 @@ - Fix `n-data-table`'s `work-break` isn't `break-word`. - Fix `n-list`'s css variable `n-merged-color` is not correct. - Fix `MessageReactive`'s `destroy` method throws error if message has disappeared. +- Fix `n-ellpisis` can't show tooltip if content width is very close to container width, closes [#1393](https://github.com/TuSimple/naive-ui/issues/1393), [#2899](https://github.com/TuSimple/naive-ui/issues/2899). ### Feats diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 95dfe1ead3a..3f5422f3758 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -11,6 +11,7 @@ - 修复 `n-data-table` 的 `work-break` 样式为 `break-word` - 修复 `n-list` 的 `n-merged-color` 样式不正常 - 修复 `MessageReactive` 的 `destroy` 方法在 message 消失后调用会抛错 +- 修复 `n-ellpisis` 在恰好触发省略的时候无法弹出 tooltip,关闭 [#1393](https://github.com/TuSimple/naive-ui/issues/1393)、[#2899](https://github.com/TuSimple/naive-ui/issues/2899) ### Feats diff --git a/src/ellipsis/demos/zhCN/index.demo-entry.md b/src/ellipsis/demos/zhCN/index.demo-entry.md index 51534be0e63..8da4ad6cdc2 100644 --- a/src/ellipsis/demos/zhCN/index.demo-entry.md +++ b/src/ellipsis/demos/zhCN/index.demo-entry.md @@ -12,6 +12,7 @@ line-clamp.vue expand-trigger.vue custom-tooltip.vue dynamic-debug.vue +width-debug.vue ``` ## API diff --git a/src/ellipsis/demos/zhCN/width-debug.demo.vue b/src/ellipsis/demos/zhCN/width-debug.demo.vue new file mode 100644 index 00000000000..5f9be895393 --- /dev/null +++ b/src/ellipsis/demos/zhCN/width-debug.demo.vue @@ -0,0 +1,9 @@ + +# Width debug + + + diff --git a/src/ellipsis/src/Ellipsis.tsx b/src/ellipsis/src/Ellipsis.tsx index 5d07becd234..0a745eff12b 100644 --- a/src/ellipsis/src/Ellipsis.tsx +++ b/src/ellipsis/src/Ellipsis.tsx @@ -44,6 +44,7 @@ export default defineComponent({ mergedClsPrefixRef ) const triggerRef = ref(null) + const triggerInnerRef = ref(null) const tooltipRef = ref(null) const expandedRef = ref(false) const ellipsisStyleRef = computed(() => { @@ -74,7 +75,12 @@ export default defineComponent({ if (lineClamp !== undefined) { tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight } else { - tooltipDisabled = trigger.scrollWidth <= trigger.offsetWidth + const { value: triggerInner } = triggerInnerRef + if (triggerInner) { + tooltipDisabled = + triggerInner.getBoundingClientRect().width <= + trigger.getBoundingClientRect().width + } } syncCursorStyle(trigger, tooltipDisabled) } @@ -112,7 +118,7 @@ export default defineComponent({ props.expandTrigger === 'click' ? getTooltipDisabled : undefined } > - {slots} + {props.lineClamp ? slots : {slots}} ) function syncEllipsisStyle (trigger: HTMLElement): void { @@ -160,6 +166,7 @@ export default defineComponent({ return { mergedTheme, triggerRef, + triggerInnerRef, tooltipRef, handleClick: handleClickRef, renderTrigger,