fix(steps): resolve text overflow no tooltip

opentiny · May 16, 2024 · 83de0f9 · 83de0f9
1 parent f834ca7
commit 83de0f9
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 15 deletions.
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
@@ -14,7 +14,7 @@ import { Steps as TinySteps, Modal } from '@opentiny/vue'
 const advancedActive = ref(1)
 const data = ref([
   { name: 'Basic Info', count: 3, status: 'doing' },
-  { name: 'BOQ Info', count: 0, status: 'done' },
+  { name: 'BOQ Info. So long that overflow', count: 0, status: 'done' },
   { name: 'Involved Parties', count: 10, status: 'doing' },
   { name: 'Billing', count: 0, status: 'done' },
   { name: 'Appraise', count: 0 }

diff --git a/examples/sites/demos/pc/app/steps/advanced-steps.vue b/examples/sites/demos/pc/app/steps/advanced-steps.vue
@@ -19,8 +19,8 @@ export default {
       advancedActive: 1,
       data: [
         { name: 'Basic Info', count: 3, status: 'done' },
-        { name: 'BOQ Info', count: 0, status: 'doing' },
-        { name: 'Involved Parties', count: 10, status: 'error' },
+        { name: 'BOQ Info. So long that overflow', count: 0, status: 'doing' },
+        { name: 'Involved Parties ', count: 10, status: 'error' },
         { name: 'Billing', count: 0, status: 'disabled' },
         { name: 'Appraise', count: 3 }
       ]

diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
@@ -960,9 +960,10 @@
       }
 
       .label {
+        display: flex;
+        align-items: center;
         border: solid 1px var(--ti-steps-advanced-border-color);
         border-right: none;
-        display: block;
         text-align: center;
         position: relative;
         text-decoration: none;
@@ -1001,6 +1002,17 @@
             border-left-color: var(--ti-steps-advanced-li-hover-bg-color);
           }
         }
+
+        span {
+          flex: 1;
+          display: block;
+          width: 100%;
+          height: 100%;
+          margin: 0 var(--ti-steps-label-margin-horizontal);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
       &:first-child {
@@ -1030,12 +1042,12 @@
         height: var(--ti-steps-advanced-dot-height);
         width: var(--ti-steps-advanced-dot-width);
         margin-right: 8px;
-        padding: 0;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
+        // padding: 0;
+        // right: 0;
+        // top: 50%;
+        // transform: translateY(-50%);
         display: flex;
-        position: absolute;
+        // position: absolute;
 
         svg {
           width: 100%;

diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
@@ -67,6 +67,8 @@
   --ti-steps-custom-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
   // 自定义图标大小(hide)
   --ti-steps-custom-icon-width-height: var(--ti-common-space-3x, 12px);
+  // 名称水平外边距(hide)
+  --ti-steps-label-margin-horizontal: var(--ti-common-space-4x, 16px);
 
   // 活跃节点背景色
   --ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);

diff --git a/packages/vue/src/steps/src/pc/pc-standard.vue b/packages/vue/src/steps/src/pc/pc-standard.vue
@@ -12,16 +12,18 @@
         @click="$emit('click', index, node)"
       >
         <slot name="item" :slot-scope="node" :index="index">
-          <div class="label" :title="node[nameField]">
-            <span>{{ node[nameField] }}</span>
+          <div class="label">
+            <tiny-tooltip :content="node[nameField]" visible="auto">
+              <span>{{ node[nameField] }}</span>
+            </tiny-tooltip>
+            <div v-if="['doing', 'done'].includes(node[statusField])" :class="['dot', node[statusField]]">
+              <icon-refres v-if="node[statusField] === 'doing'"></icon-refres>
+              <icon-yes v-else-if="node[statusField] === 'done'"></icon-yes>
+            </div>
           </div>
           <div v-if="node[countField]" class="count">
             {{ node[countField] }}
           </div>
-          <div v-if="node[statusField]" :class="['dot', node[statusField]]">
-            <icon-refres v-if="node[statusField] === 'doing'"></icon-refres>
-            <icon-yes v-else-if="node[statusField] === 'done'"></icon-yes>
-          </div>
         </slot>
       </li>
     </ul>
@@ -31,11 +33,13 @@
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/steps/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
+import ToolTip from '@opentiny/vue-tooltip'
 import { iconRefres, iconYes } from '@opentiny/vue-icon'
 
 export default defineComponent({
   emits: ['click'],
   components: {
+    TinyTooltip: ToolTip,
     IconRefres: iconRefres(),
     IconYes: iconYes()
   },