perf: 样式调整

2025-07-30 17:44:27 +08:00
parent 35835ca113
commit b1a5914e30
6 changed files with 167 additions and 16 deletions
--- a/src/components/text-over-tips/index.vue
+++ b/src/components/text-over-tips/index.vue
@ -0,0 +1,141 @@
+<template>
+  <a-tooltip :disabled="isShowBtn || (!isShowBtn && disabled)" :placement="props.placement">
+    <template #content>
+      <div :style="contentStyle" class="tip-content">{{ props.context }}</div>
+    </template>
+    <div class="overflow-hidden">
+      <div v-bind="$attrs" ref="Text" :class="`${isShow ? '' : `line-${props.line}`} `" class="overflow-text">
+        {{ props.context }}
+      </div>
+      <div
+        v-if="isShowBtn && !disabled"
+        class="color-#8C8C8C flex items-center cursor-pointer mt-2px"
+        @click="
+          () => {
+            isShow = !isShow;
+          }
+        "
+      >
+        {{ isShow ? '收起' : '展开' }}
+        <icon-up size="16" :class="{ active: isShow }" class="ml-2px color-#8C8C8C" />
+      </div>
+    </div>
+  </a-tooltip>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, watch, nextTick, defineProps } from 'vue';
+import elementResizeDetectorMaker from 'element-resize-detector';
+
+const props = defineProps({
+  context: {
+    type: String,
+    default: '',
+  },
+  placement: {
+    type: String,
+    default: 'bottom',
+  },
+  line: {
+    type: Number,
+    default: 1,
+  },
+  maxHeight: {
+    type: [String, Number],
+    default: '',
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: '',
+  },
+  isShowBtn: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const data = reactive({});
+const isShow = ref(false);
+const contentStyle = computed(() => {
+  let style = {
+    'max-height': props.maxHeight + 'px',
+    'max-width': props.maxWidth + 'px',
+    overflow: 'auto',
+    padding: '1px 0',
+  };
+  return props.maxHeight || props.maxWidth ? style : {};
+});
+const disabled = ref(true);
+const Text = ref(null);
+const textWidth = ref();
+watch(
+  [() => props.context, textWidth],
+  async () => {
+    if (props.context) {
+      await nextTick();
+      nextTick(() => {
+        if (props.line < 2) {
+          if (Text.value?.clientWidth < Text.value?.scrollWidth) {
+            disabled.value = false;
+          } else {
+            disabled.value = true;
+          }
+        } else {
+          if (Text.value?.clientHeight < Text.value?.scrollHeight) {
+            disabled.value = false;
+          } else {
+            disabled.value = true;
+          }
+        }
+      });
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+onBeforeMount(() => {});
+onMounted(async () => {
+  await nextTick();
+  const erd = elementResizeDetectorMaker();
+  if (Text.value) {
+    erd.listenTo(Text.value, () => {
+      const _width = Text.value.getBoundingClientRect().width;
+      textWidth.value = _width;
+    });
+  }
+});
+watchEffect(() => {});
+defineExpose({
+  ...toRefs(data),
+});
+</script>
+<style scoped lang="scss">
+.overflow-text {
+  display: inline-block;
+  font-family: $font-family-regular;
+  width: 100%;
+  vertical-align: middle;
+  font-style: normal;
+  box-sizing: border-box;
+  white-space: pre-line;
+  &.line-1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &.line-2 {
+    @include multi-ellipsis(2);
+  }
+  &.line-3 {
+    @include multi-ellipsis(3);
+  }
+}
+.tip-content {
+  white-space: pre-line;
+}
+.active {
+  transform: rotate(-180deg);
+}
+</style>