resolver-egretimp-plus 0.0.298 → 0.0.299

package/src/components/packages-web/ElInput.jsx

@@ -7,6 +7,8 @@ import { getDomWidth } from '../../utils/dom.js';
 import { watch } from 'vue';
 import { nextTick } from 'vue';
 import { resolveComponent } from 'vue';
+import { onUnmounted } from 'vue';
+import { useToolTip } from '../helper/calcTooltip.jsx';
 
 export default {
   inheritAttrs: false,
@@ -17,28 +19,37 @@ export default {
       type: [Number, String],
       default: 2,
     },
+    // 是否在超出的时候展示tooltip
+    showTooltip: {
+      type: [String, Number],
+      default: ''
+    },
+    // 是否使用金额显示
     showMoney: {
       type: [String, Number],
       default: ''
     },
+    // 金额显示的分割，默认‘,’
     moneySeg: {
       type: [String],
       default: ','
     },
+    // 金额显示的最小值
     min: {
       type: Number,
       default: -Infinity
     },
+    // 金额显示的最大值
     max: {
       type: Number,
       default: Infinity
     },
-    // 小数位数
+    // 金额显示小数位数
     decimal: {
       type: Number,
       default: 2
     },
-    // 保留小数点0后缀
+    // 金额显示时保留小数点0后缀
     decimalSuffix: {
       type: [Number, String],
       default: '0'
@@ -48,7 +59,7 @@ export default {
       type: Array,
       default: ['na', '-']
     },
-    // 是否显示货币符号
+    // 金额显示是否显示货币符号
     showSymbol: {
       type: String,
       default: ''
@@ -67,9 +78,6 @@ export default {
   },
   emits: ['update:modelValue'],
   setup(props, { emit, attrs, expose, slots }) {
-    const isOverflow = ref(false)
-    const inputWrapRef = ref(null)
-    const calcSpanRef = ref(null)
     const inputProps = computed(() => {
       const ret = Object.keys(ElInput.props).reduce((total, key) => {
         total[key] = props[key]
@@ -96,7 +104,7 @@ export default {
       return ret
     })
     const showTooltip = computed(() => {
-      return props?.config?.showTooltip == '1' && props.disabled
+      return props?.showTooltip == '1'
     })
     // 这个是真实的值
     const modelValue = computed({
@@ -108,11 +116,22 @@ export default {
       }
     })
     // 开启金额展示的时候需要isFocus来控制格式的转换
-    const isFocus = ref(false)
     const currentVal = ref('')
+    const isFocus = ref(false)
     const displayValue = computed(() => {
       return props.showMoney == '1' ? (isFocus.value ? currentVal.value : formatValue(modelValue.value)) : modelValue.value
     })
+    const { generateTooltipWrap } = useToolTip({
+      showTooltip,
+      offset: computed(() => {
+        let offset = 20
+        if (!props.disabled && props.clearable) {
+          offset = 50
+        }
+        return offset
+      }),
+      displayValue
+    })
     const isPagePopupAndSearch = computed(() => {
       return props.config?.lcpPagePopupMapVO && inputProps.value.suffixIcon == 'Search'
     })
@@ -138,12 +157,12 @@ export default {
         }
         if (props.showMoney == '1') {
           ret['onFocus'] = () => {
-            currentVal.value = modelValue.value
             isFocus.value = true
+            currentVal.value = modelValue.value
           }
           ret['onBlur'] = () => {
-            modelValue.value = parseValue(formatValue(currentVal.value))
             isFocus.value = false
+            modelValue.value = parseValue(formatValue(currentVal.value))
           }
         }
       } else {
@@ -154,17 +173,13 @@ export default {
       }
       return ret
     })
-    const inputWrapAttrs = computed(() => {
-      return {
-        class: attrs?.class,
-        style: attrs?.style
-      }
-    })
+
     const normalAttrs = computed(() => {
       const ret = {
         ...attrs
       }
       delete ret.class
+
       if (isPagePopupAndSearch.value && isOnlyIconClickFlag.value) {
         delete ret.onClick
       }
@@ -182,54 +197,6 @@ export default {
       return ret
     })
 
-    const tooltipCalc = (() => {
-      let unWatch = null
-      let onResize = null
-      return {
-        clear: () => {
-          unWatch && unWatch()
-          onResize && window.removeEventListener('resize', onResize)
-        },
-        calc() {
-          this.clear()
-          let inputWrapWidth = getDomWidth(inputWrapRef.value, 0)
-          let textLengthWidth = getDomWidth(calcSpanRef.value, -22)
-          isOverflow.value = inputWrapWidth < textLengthWidth
-          unWatch = watch(() => modelValue.value, (val) => {
-            nextTick(() => {
-              textLengthWidth = getDomWidth(calcSpanRef.value, -22)
-              isOverflow.value = inputWrapWidth < textLengthWidth
-            })
-          })
-          onResize = () => {
-            inputWrapWidth = getDomWidth(inputWrapRef.value, 0)
-            isOverflow.value = inputWrapWidth < textLengthWidth
-            console.log('isOverflow==:', isOverflow.value, inputWrapWidth)
-          }
-          window.addEventListener('resize', onResize)
-        }
-      }
-    })()
-
-    onMounted(() => {
-      watch(showTooltip, (val) => {
-        if (val) {
-          tooltipCalc?.calc()
-        }
-      }, {
-        immediate: true
-      })
-    })
-    const polyfillInputWrap = (node) => {
-      if (isOverflow.value) {
-        return (
-          <el-tooltip content={modelValue.value} placement="top">
-            { node }
-          </el-tooltip>
-        )
-      }
-      return node
-    }
     const getInputSolts = () => {
       const ret = {
         ...slots
@@ -321,21 +288,12 @@ export default {
       }
     })
     return () => {
-      return (
-        <div class="input-contrainer" {...inputWrapAttrs.value}>
-          <span ref={(e) => calcSpanRef.value = e} class="calc-span">{ displayValue.value }</span>
+      return generateTooltipWrap(
+        <ElInput {...vmodelProps.value} {...{...normalAttrs.value, ...normalInputProps.value}}>
           {
-            polyfillInputWrap(
-              <div class="input-wrap" ref={(e) => inputWrapRef.value = e}>
-                <ElInput {...vmodelProps.value} {...{...normalAttrs.value, ...normalInputProps.value}}>
-                  {
-                    getInputSolts()
-                  }
-                </ElInput>
-              </div>
-            )
+            getInputSolts()
           }
-        </div>
+        </ElInput>
       )
     }
   }

package/src/components/packages-web/ElText.jsx

@@ -3,6 +3,7 @@ import { computed, defineProps, inject, getCurrentInstance, useAttrs, useSlots }
 import { commonPropsType } from '../../utils/index.js'
 import { h, resolveComponent, withModifiers } from 'vue'
 import '../styles/text.scss'
+import { useToolTip } from '../helper/calcTooltip.jsx'
 
 export default {
   inheritAttrs: false,
@@ -20,6 +21,15 @@ export default {
     },
     isPointer: {
       type: [String, Number]
+    },
+    // 是否在超出的时候展示tooltip
+    showTooltip: {
+      type: [String, Number],
+      default: '1'
+    },
+    truncated: {
+      type: [String, Number, Boolean],
+      default: '1'
     }
   },
   emits: ['update:modelValue'],
@@ -61,6 +71,9 @@ export default {
         ret[key] = props[key]
         return ret
       }, {})
+      if (typeof result.truncated !== 'boolean') {
+        result.truncated = result.truncated == '1'
+      }
       return result
     })
     const buttonActions = inject('buttonActions', {})
@@ -68,6 +81,27 @@ export default {
     const labelDesc = computed(() => {
       return normalVal.value
     })
+    const showTooltip = computed(() => {
+      return props?.showTooltip == '1'
+    })
+
+    const { generateTooltipWrap } = useToolTip({
+      showTooltip,
+      offset: computed(() => {
+        let offset = 0
+        if (props.needWrap == '1') {
+          offset = 22
+          if (props.suffixIcon) {
+            offset = 36
+          }
+        }
+        return offset
+      }),
+      displayValue: labelDesc,
+      calcFn(node) {
+        return node?.getBoundingClientRect?.()?.width
+      }
+    })
   
     const dynamicMapComp = inject('dynamicMapComp')
     const hireRelatMapRules = inject('hireRelatMapRules')
@@ -139,13 +173,15 @@ export default {
       }
     }
     return () => {
-      return getWrap(
+      return generateTooltipWrap(getWrap(
         <ElText {...{...attrs, ...elTextProps.value}} onClickCapture={withModifiers((e) => {clickAction(e)}, [ 'stop', 'self' ])} class={{cursor: props.isPointer == '1'}}>
           {
             getSlots()
           }
         </ElText>
-      )
+      ), {
+        maintain: true,
+      })
     }
   }
 }

package/src/theme/element/components/input.scss

@@ -20,16 +20,16 @@
   }
 }
 
-.input-contrainer {
-  width: 100%;
-  .calc-span {
-    white-space: nowrap;
-    position: absolute;
-    visibility: hidden;
-    padding: 0 11px;
-    box-sizing: border-box;
-  }
-  .input-wrap{
-    width: 100%;
-  }
-}
+// .input-contrainer {
+//   width: 100%;
+//   .calc-span {
+//     white-space: nowrap;
+//     position: absolute;
+//     visibility: hidden;
+//     padding: 0 11px;
+//     box-sizing: border-box;
+//   }
+//   .input-wrap{
+//     width: 100%;
+//   }
+// }

package/src/theme/element/index.scss

@@ -34,3 +34,18 @@
     }
   }
 }
+
+
+.resolver-calc-contrainer {
+  width: 100%;
+  .resolver-calc-span {
+    white-space: nowrap;
+    position: absolute;
+    visibility: hidden;
+    padding: 0 11px;
+    box-sizing: border-box;
+  }
+  .resolver-calc-wrap{
+    width: 100%;
+  }
+}