chore: 使用css module解决样式冲突

vbenjs · Aug 7, 2024 · 127fa2c · 127fa2c
1 parent 8d01a1f
commit 127fa2c
Showing 1 changed file with 17 additions and 16 deletions.
diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
@@ -18,7 +18,7 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
   expand: false,
-  line: undefined,
+  line: 1,
   maxWidth: '100%',
   placement: 'top',
   tooltip: true,
@@ -84,35 +84,36 @@ function onExpand() {
     <template #trigger>
       <div
         ref="ellipsis"
-        :class="[
-          line ? 'ellipsis-line' : 'not-ellipsis-line',
-          { 'cursor-pointer': expand },
-        ]"
+        :class="{
+          pointer: expand,
+          [$style.ellipsisOneLine]: line === 1,
+          [$style.ellipsisMultiLine]: line > 1,
+        }"
         :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
         class="cursor-text overflow-hidden"
         @click="expand ? onExpand() : () => false"
         v-bind="$attrs"
+        :data-line="line"
       >
         <slot></slot>
       </div>
     </template>
   </VbenTooltip>
 </template>
 
-<style lang="scss">
-.ellipsis-line {
-  display: -webkit-inline-box;
-  -webkit-box-orient: vertical;
+<style>
+.pointer {
+  @apply cursor-pointer;
 }
+</style>
 
-.not-ellipsis-line {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: bottom;
+<style module>
+.ellipsisOneLine {
+  @apply inline-block truncate;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.ellipsisMultiLine {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
 }
 </style>