[fix]ISVJ-7716点选自动换行 review by qiw

SuperMap · Oct 30, 2024 · 498a0df · 498a0df
1 parent 3915f58
commit 498a0df
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/mapboxgl/layer-highlight/LayerHighlight.vue b/src/mapboxgl/layer-highlight/LayerHighlight.vue
@@ -68,7 +68,9 @@ export default {
           keyWidth: 80,
           valueWidth: 150,
           keyMaxWidth: 160,
-          valueMaxWidth: 300
+          valueMaxWidth: 300,
+          keyWordStyle: 'ellipsis',
+          valueWordStyle: 'ellipsis'
         };
       }
     },
@@ -92,7 +94,7 @@ export default {
       return this.allPopupDatas[this.currentIndex] || [];
     },
     columnStyle() {
-      const { autoResize, keyWidth, valueWidth, keyMaxWidth, valueMaxWidth } = this.popupStyle;
+      const { autoResize, keyWidth, valueWidth, keyMaxWidth, valueMaxWidth, keyWordStyle, valueWordStyle} = this.popupStyle;
       let style = { keyStyle: {}, valueStyle: {} };
       if (!autoResize) {
         if (keyWidth) {
@@ -101,7 +103,6 @@ export default {
         if (valueWidth) {
           style.valueStyle.width = valueWidth + 'px';
         }
-        return style;
       } else {
         if (keyMaxWidth) {
           style.keyStyle.maxWidth = keyMaxWidth + 'px';
@@ -110,14 +111,25 @@ export default {
           style.valueStyle.maxWidth = valueMaxWidth + 'px';
         }
       }
+      const ellipsisStyle = {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
+      if (keyWordStyle === 'ellipsis'){
+        style.keyStyle = {...style.keyStyle, ...ellipsisStyle}
+      }
+      if (valueWordStyle === 'ellipsis'){
+        style.valueStyle = {...style.valueStyle, ...ellipsisStyle}
+      }
       return style;
     },
     tableColumns() {
       return [
         {
           dataIndex: 'attribute',
           customRender: (text, record) => {
-            return <div style={this.columnStyle.keyStyle}>{record.alias || text}</div>;
+            return <div style={this.columnStyle.keyStyle} title={record.alias || text}>{record.alias || text}</div>;
           }
         },
         {
@@ -127,10 +139,11 @@ export default {
               record.slotName &&
               ((this.customColumnRenders || {})[record.slotName] ||
                 (this.$parent && this.$parent.$scopedSlots[record.slotName]));
+            const style = this.columnStyle.valueStyle;
             if (valueCustomRender) {
-              return <div style={this.columnStyle.valueStyle}>{valueCustomRender({ value: text })}</div>;
+              return <div style={style} title={text}>{valueCustomRender({ value: text, style })}</div>;
             }
-            return <div style={this.columnStyle.valueStyle}>{text}</div>;
+            return <div style={style} title={text}>{text}</div>;
           }
         }
       ];

diff --git a/src/mapboxgl/layer-highlight/__tests__/LayersHighlight.spec.js b/src/mapboxgl/layer-highlight/__tests__/LayersHighlight.spec.js
@@ -70,6 +70,9 @@ describe('LayerHighlight.vue', () => {
     wrapper.vm.$nextTick();
     expect(wrapper.find(SmMapPopup).exists()).toBe(true);
     expect(wrapper.vm.tableColumns.length).toBe(2);
+    const style = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+    expect(wrapper.vm.columnStyle.keyStyle).toEqual({ ...style, maxWidth: '160px' });
+    expect(wrapper.vm.columnStyle.valueStyle).toEqual({ ...style, maxWidth: '300px' });
     done();
   });
 
@@ -216,4 +219,3 @@ describe('LayerHighlight.vue', () => {
     done();
   });
 });
-
diff --git a/src/mapboxgl/web-map/control/identify/Identify.vue b/src/mapboxgl/web-map/control/identify/Identify.vue
@@ -102,7 +102,15 @@ export default {
     valueWidth: {
       type: [Number, String],
       default: 170
-    }
+    },
+    keyWordStyle: {
+      type: String,
+      default: 'ellipsis'
+    },
+    valueWordStyle: {
+      type: String,
+      default: 'ellipsis'
+    },
   },
   data() {
     return {
@@ -116,6 +124,8 @@ export default {
         valueWidth: this.valueWidth,
         keyMaxWidth: this.keyMaxWidth,
         valueMaxWidth: this.valueMaxWidth,
+        keyWordStyle: this.keyWordStyle,
+        valueWordStyle: this.valueWordStyle,
         autoResize: this.autoResize
       };
     },