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

SuperMap · Oct 30, 2024 · 0264c7c · 0264c7c
1 parent 7a0387c
commit 0264c7c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/docs/zh/api/control/identify.md b/docs/zh/api/control/identify.md
@@ -22,5 +22,7 @@
 | valueMaxWidth  | 值列的最大宽度                                                         | number                                                        | -      | 170    |
 | keyWidth       | 键列的宽度                                                             | number                                                        | -      | 110    |
 | valueWidth     | 值列的宽度                                                             | number                                                        | -      | 170    |
+| keyWordStyle   | 键列的文本样式，省略号或自动换行                                         | string                                                        |   'ellipsis', 'wrap'   | 'ellipsis'    |
+| valueWordStyle | 值列的文本杨思， 省略号或自动换行                                          | string                                                        |  'ellipsis', 'wrap'       | 'ellipsis'    |
 
 > 支持[主题混入参数](/zh/api/mixin/mixin.md#theme)
diff --git a/src/mapboxgl/web-map/control/identify/Identify.vue b/src/mapboxgl/web-map/control/identify/Identify.vue
@@ -11,18 +11,23 @@
     :mapTarget="mapTarget"
     @change="handleChange"
   >
-    <div slot="identify" >
+    <div slot="identify">
       <ul
         :class="[
           autoResize ? 'sm-component-identify__auto' : 'sm-component-identify__custom',
           'sm-component-identify__content'
         ]"
       >
         <li v-for="(value, key, index) in popupProps" :key="index" class="content">
-          <div class="left ellipsis" :title="key" :style="getWidthStyle.keyWidth">{{ key }}</div>
-          <div class="right ellipsis" :title="value.value || value" :style="getWidthStyle.valueWidth">
-            <slot v-if="value.slotName" :name="value.slotName" :value="value.value"></slot>
-            <span v-else>{{ value.value || value }}</span>
+          <div class="left" :title="key" :style="getColStyle.keyStyle">{{ key }}</div>
+          <div class="right" :title="value.value || value" :style="getColStyle.valueStyle">
+            <slot
+              v-if="value.slotName"
+              :name="value.slotName"
+              :value="value.value"
+              :style="getColStyle.valueStyle"
+            ></slot>
+            <span v-else :style="getColStyle.valueStyle">{{ value.value || value }}</span>
           </div>
         </li>
       </ul>
@@ -115,6 +120,14 @@ export default {
     valueWidth: {
       type: [Number, String],
       default: 170
+    },
+    keyWordStyle: {
+      type: String,
+      default: 'ellipsis'
+    },
+    valueWordStyle: {
+      type: String,
+      default: 'ellipsis'
     }
   },
   data() {
@@ -128,24 +141,46 @@ export default {
     };
   },
   computed: {
-    getWidthStyle() {
-      let style = { keyWidth: {}, valueWidth: {} };
+    getColStyle() {
+      let style = { keyStyle: {}, valueStyle: {} };
       if (!this.autoResize) {
         if (this.keyWidth) {
-          style.keyWidth.width = this.keyWidth + 'px';
+          style.keyStyle.width = this.keyWidth + 'px';
         }
         if (this.valueWidth) {
-          style.valueWidth.width = this.valueWidth + 'px';
+          style.valueStyle.width = this.valueWidth + 'px';
         }
-        return style;
       } else {
         if (this.keyMaxWidth) {
-          style.keyWidth.maxWidth = this.keyMaxWidth + 'px';
+          style.keyStyle.maxWidth = this.keyMaxWidth + 'px';
         }
         if (this.valueMaxWidth) {
-          style.valueWidth.maxWidth = this.valueMaxWidth + 'px';
+          style.valueStyle.maxWidth = this.valueMaxWidth + 'px';
         }
       }
+      const textStyle = this.getTextStyle;
+      return {
+        keyStyle: { ...style.keyStyle, ...textStyle.keyStyle },
+        valueStyle: { ...style.valueStyle, ...textStyle.valueStyle }
+      };
+    },
+    getTextStyle() {
+      let style = { keyStyle: {}, valueStyle: {} };
+      const ellipsisStyle = {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      };
+      if (this.keyWordStyle === 'ellipsis') {
+        style.keyStyle = { ...ellipsisStyle };
+      } else {
+        style.keyStyle = { wordWrap: 'break-word' };
+      }
+      if (this.valueWordStyle === 'ellipsis') {
+        style.valueStyle = { ...ellipsisStyle };
+      } else {
+        style.valueStyle = { wordWrap: 'break-word' };
+      }
       return style;
     },
     popupProps() {

diff --git a/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js b/src/mapboxgl/web-map/control/identify/__tests__/Identify.spec.js
@@ -38,6 +38,9 @@ describe('Identify.vue', () => {
     wrapper.vm.getWidthStyle;
     expect(wrapper.vm.keyMaxWidth).toBe(110);
     expect(wrapper.vm.valueMaxWidth).toBe(170);
+    const style = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+    expect(wrapper.vm.getTextStyle.keyStyle).toEqual({ ...style });
+    expect(wrapper.vm.getTextStyle.valueStyle).toEqual({ ...style });
     done();
   });