refactor: tooltip support scroll #1887

VisActor · Jun 12, 2024 · 768b1c1 · 768b1c1
1 parent b3ef184
commit 768b1c1
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 9 deletions.
diff --git a/packages/vtable/examples/icon/icon-register.ts b/packages/vtable/examples/icon/icon-register.ts
@@ -88,8 +88,9 @@ export function createTable() {
       </svg>`,
     tooltip: {
       // 气泡框，按钮的的解释信息
-      title: '更多操作',
-      style: { bgColor: 'black', arrowMark: true, color: 'white' },
+      title:
+        '更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作更多操作操作 更多操作更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作 更多操作更多操作',
+      style: { bgColor: 'black', arrowMark: true, color: 'white', maxHeight: 100, maxWidth: 100 },
       disappearDelay: 100
     }
   });
@@ -396,7 +397,8 @@ export function createTable() {
           return `这是第${rec.id}号`;
         },
         title: 'ID说明',
-        description: '这是一个ID详细描述',
+        description: `这是一个ID详细描述\n这是一个ID详细描述
+这是一个ID详细描述`,
         sort: (v1, v2, order) => {
           if (order === 'desc') {
             return v1 === v2 ? 0 : v1 > v2 ? -1 : 1;
@@ -430,6 +432,11 @@ export function createTable() {
     title: {
       text: 'title',
       orient: 'top'
+    },
+    theme: {
+      tooltipStyle: {
+        maxWidth: 200
+      }
     }
   };
 

diff --git a/packages/vtable/examples/interactive/tooltip.ts b/packages/vtable/examples/interactive/tooltip.ts
@@ -39,7 +39,11 @@ export function createTable() {
           return `已完成${rec.progress}%`;
         },
         title: 'progress',
-        description: '这是一个标题的详细描述',
+        description: `这是一个标题的详细描述,这是一个标题的详细描述,
+这是一个标题的详细描述,这是一个标题的详细描述,这是一个标题的详细描述,这是一个标题的详细描述,
+这是一个标题的详细描述,这是一个标题的详细描述, 这是一个标题的详细描述,这是一个标题的详细描述,
+这是一个标题的详细描述,这是一个标题的详细描述,这是一个标题的详细描述,这是一个标题的详细描述,
+这是一个标题的详细描述,这是一个标题的详细描述`,
         width: 150,
         showSort: true //显示VTable内置排序图标
       },
@@ -86,7 +90,8 @@ export function createTable() {
     allowFrozenColCount: 2,
     tooltip: {
       renderMode: 'html',
-      isShowOverflowTextTooltip: true
+      isShowOverflowTextTooltip: true,
+      overflowTextTooltipDisappearDelay: 1000
     }
   };
 

diff --git a/packages/vtable/src/components/tooltip/TooltipHandler.ts b/packages/vtable/src/components/tooltip/TooltipHandler.ts
@@ -196,7 +196,7 @@ export class TooltipHandler {
           rect
         },
         disappearDelay: table.internalProps.tooltip.overflowTextTooltipDisappearDelay ?? 0,
-        style: { arrowMark: false }
+        style: table.theme.tooltipStyle
       };
     } else if (table.internalProps.tooltip?.isShowOverflowTextTooltip) {
       const overflowText = table.getCellOverflowText(col, row);

diff --git a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElement.ts b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElement.ts
@@ -23,7 +23,7 @@ export class BubbleTooltipElement {
   constructor() {
     this._handler = new EventHandler();
     const rootElement = (this._rootElement = createElement('div', [TOOLTIP_CLASS, HIDDEN_CLASS]));
-    const messageElement = createElement('span', [CONTENT_CLASS]);
+    const messageElement = createElement('div', [CONTENT_CLASS]);
     const triangle = createElement('span', [TRIANGLE_CLASS]);
     rootElement.appendChild(triangle);
     rootElement.appendChild(messageElement);
@@ -37,6 +37,10 @@ export class BubbleTooltipElement {
       this._disappearDelay = undefined;
       this.unbindFromCell();
     });
+
+    messageElement.addEventListener('wheel', e => {
+      e.stopPropagation();
+    });
   }
   bindToCell(
     table: BaseTableAPI,
@@ -69,6 +73,10 @@ export class BubbleTooltipElement {
       tooltipInstanceInfo?.style?.color && (messageElement.style.color = tooltipInstanceInfo?.style?.color);
       tooltipInstanceInfo?.style?.padding &&
         (messageElement.style.padding = `${tooltipInstanceInfo?.style?.padding.join('px ')}px`);
+      tooltipInstanceInfo?.style?.maxHeight &&
+        (messageElement.style.maxHeight = `${tooltipInstanceInfo?.style?.maxHeight}px`);
+      tooltipInstanceInfo?.style?.maxWidth &&
+        (messageElement.style.maxWidth = `${tooltipInstanceInfo?.style?.maxWidth}px`);
       messageElement && (messageElement.textContent = tooltipInstanceInfo?.content);
       const binded = this._bindToCell(
         table,

diff --git a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts
@@ -53,12 +53,30 @@ export function importStyle() {
 	white-space: pre-wrap;
 	margin: 0;
 	box-sizing: border-box;
-	overflow: hidden;
+	overflow: auto;
 	word-wrap: break-word;
 	position: relative;
 	background-color: #FFF;
 	z-index: 2;
-	border-radius: 4px
+	border-radius: 4px;
+}
+/*  WebKit Microsoft Edge（新版）： */
+.vtable__bubble-tooltip-element__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+/*  Opera Firefox  */
+.vtable__bubble-tooltip-element__content > scrollbar-track {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+/* Internet Explorer 11 和 Microsoft Edge（旧版） */
+.vtable__bubble-tooltip-element__content > scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
 }
 .vtable__bubble-tooltip-element__triangle {
 	/* font-size: .75rem; */

diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts
@@ -493,6 +493,12 @@ export class TableTheme implements ITableThemeDefine {
         },
         get color(): string | undefined {
           return tooltip.color ?? '#FFF';
+        },
+        get maxWidth(): number | undefined {
+          return tooltip.maxWidth;
+        },
+        get maxHeight(): number | undefined {
+          return tooltip.maxHeight;
         }
       };
     }

diff --git a/packages/vtable/src/ts-types/icon.ts b/packages/vtable/src/ts-types/icon.ts
@@ -63,6 +63,8 @@ export interface IIconBase {
       padding?: number[];
       bgColor?: string;
       arrowMark?: boolean;
+      maxWidth?: number;
+      maxHeight?: number;
     };
     disappearDelay?: number;
   };

diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts
@@ -73,6 +73,8 @@ export type TooltipStyle = {
   color?: string;
   padding?: number[];
   bgColor?: string;
+  maxWidth?: number;
+  maxHeight?: number;
   /** !目前未实现该逻辑。触发行为：hover or click */
   // trigger?: string | string[];
   /**气泡框位置，可选 top left right bottom */

diff --git a/packages/vtable/src/ts-types/tooltip.ts b/packages/vtable/src/ts-types/tooltip.ts
@@ -26,6 +26,8 @@ export type TooltipOptions = {
     color?: string;
     padding?: number[];
     arrowMark?: boolean;
+    maxWidth?: number;
+    maxHeight?: number;
   };
   /** 设置tooltip的消失时间 */
   disappearDelay?: number;