fix(TextEllipsis): calculate the width of the action slot correctly (#13005)

packages/vant/src/text-ellipsis/TextEllipsis.tsx

@@ -5,6 +5,7 @@ import {
   onActivated,
   onMounted,
   defineComponent,
+  nextTick,
   type ExtractPropTypes,
 } from 'vue';
 
@@ -39,10 +40,11 @@ export default defineComponent({
   emits: ['clickAction'],
 
   setup(props, { emit, slots }) {
-    const text = ref('');
+    const text = ref(props.content);
     const expanded = ref(false);
     const hasAction = ref(false);
     const root = ref<HTMLElement>();
+    const actionRef = ref<HTMLElement>();
     let needRecalculate = false;
 
     const actionText = computed(() =>
@@ -79,97 +81,96 @@ export default defineComponent({
       return container;
     };
 
-    const calcEllipsised = () => {
+    const calcEllipsisText = (container: HTMLDivElement, maxHeight: number) => {
-      const calcEllipsisText = (
+      const { content, position, dots } = props;
-        container: HTMLDivElement,
+      const end = content.length;
-        maxHeight: number,
+      const middle = (0 + end) >> 1;
-      ) => {
+      const actionHTML = slots.action
-        const { content, position, dots } = props;
+        ? actionRef.value?.outerHTML ?? ''
-        const end = content.length;
+        : props.expandText;
 
-        const calcEllipse = () => {
+      const calcEllipse = () => {
-          // calculate the former or later content
+        // calculate the former or later content
-          const tail = (left: number, right: number): string => {
+        const tail = (left: number, right: number): string => {
-            if (right - left <= 1) {
+          if (right - left <= 1) {
-              if (position === 'end') {
-                return content.slice(0, left) + dots;
-              }
-              return dots + content.slice(right, end);
-            }
-
-            const middle = Math.round((left + right) / 2);
-
-            // Set the interception location
             if (position === 'end') {
-              container.innerText =
+              return content.slice(0, left) + dots;
-                content.slice(0, middle) + dots + actionText.value;
-            } else {
-              container.innerText =
-                dots + content.slice(middle, end) + actionText.value;
             }
-
+            return dots + content.slice(right, end);
-            // The height after interception still does not match the rquired height
-            if (container.offsetHeight > maxHeight) {
-              if (position === 'end') {
-                return tail(left, middle);
-              }
-              return tail(middle, right);
-            }
-
-            if (position === 'end') {
-              return tail(middle, right);
-            }
-
-            return tail(left, middle);
-          };
-
-          container.innerText = tail(0, end);
-        };
-
-        const middleTail = (
-          leftPart: [number, number],
-          rightPart: [number, number],
-        ): string => {
-          if (
-            leftPart[1] - leftPart[0] <= 1 &&
-            rightPart[1] - rightPart[0] <= 1
-          ) {
-            return (
-              content.slice(0, leftPart[0]) +
-              dots +
-              content.slice(rightPart[1], end)
-            );
           }
 
-          const leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+          const middle = Math.round((left + right) / 2);
-          const rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
 
-          container.innerText =
+          // Set the interception location
-            props.content.slice(0, leftMiddle) +
+          if (position === 'end') {
-            props.dots +
+            container.innerText = content.slice(0, middle) + dots;
-            props.content.slice(rightMiddle, end) +
+          } else {
-            props.expandText;
+            container.innerText = dots + content.slice(middle, end);
-
-          if (container.offsetHeight >= maxHeight) {
-            return middleTail(
-              [leftPart[0], leftMiddle],
-              [rightMiddle, rightPart[1]],
-            );
           }
 
-          return middleTail(
+          container.innerHTML += actionHTML;
-            [leftMiddle, leftPart[1]],
+
-            [rightPart[0], rightMiddle],
+          // The height after interception still does not match the rquired height
-          );
+          if (container.offsetHeight > maxHeight) {
+            if (position === 'end') {
+              return tail(left, middle);
+            }
+            return tail(middle, right);
+          }
+
+          if (position === 'end') {
+            return tail(middle, right);
+          }
+
+          return tail(left, middle);
         };
 
-        const middle = (0 + end) >> 1;
+        return tail(0, end);
-        props.position === 'middle'
-          ? (container.innerText = middleTail([0, middle], [middle, end]))
-          : calcEllipse();
-        return container.innerText;
       };
 
+      const middleTail = (
+        leftPart: [number, number],
+        rightPart: [number, number],
+      ): string => {
+        if (
+          leftPart[1] - leftPart[0] <= 1 &&
+          rightPart[1] - rightPart[0] <= 1
+        ) {
+          return (
+            content.slice(0, leftPart[0]) +
+            dots +
+            content.slice(rightPart[1], end)
+          );
+        }
+
+        const leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+        const rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
+
+        container.innerText =
+          props.content.slice(0, leftMiddle) +
+          props.dots +
+          props.content.slice(rightMiddle, end);
+        container.innerHTML += actionHTML;
+
+        if (container.offsetHeight >= maxHeight) {
+          return middleTail(
+            [leftPart[0], leftMiddle],
+            [rightMiddle, rightPart[1]],
+          );
+        }
+
+        return middleTail(
+          [leftMiddle, leftPart[1]],
+          [rightPart[0], rightMiddle],
+        );
+      };
+
+      return props.position === 'middle'
+        ? middleTail([0, middle], [middle, end])
+        : calcEllipse();
+    };
+
+    const calcEllipsised = () => {
       // Calculate the interceptional text
       const container = cloneContainer();
 
@@ -210,13 +211,19 @@ export default defineComponent({
         ? slots.action({ expanded: expanded.value })
         : actionText.value;
       return (
-        <span class={bem('action')} onClick={onClickAction}>
+        <span ref={actionRef} class={bem('action')} onClick={onClickAction}>
           {action}
         </span>
       );
     };
 
-    onMounted(calcEllipsised);
+    onMounted(() => {
+      calcEllipsised();
+
+      if (slots.action) {
+        nextTick(calcEllipsised);
+      }
+    });
 
     onActivated(() => {
       if (needRecalculate) {

packages/vant/src/text-ellipsis/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -5,16 +5,19 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <!--[-->
   <div class="van-text-ellipsis">
+    Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.
   </div>
 </div>
 <div>
   <!--[-->
   <div class="van-text-ellipsis">
+    The fleeting time of one&#39;s life is everything that belongs to a person. Only this thing truly belongs to you. Everything else is just a momentary pleasure or misfortune, which will soon be gone with the passing of time.
   </div>
 </div>
 <div>
   <!--[-->
   <div class="van-text-ellipsis">
+    That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn&#39;t foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.
   </div>
 </div>
 <div>
@@ -22,16 +25,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div>
     <!--[-->
     <div class="van-text-ellipsis">
+      That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn&#39;t foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.
     </div>
   </div>
   <div>
     <!--[-->
     <div class="van-text-ellipsis">
+      That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn&#39;t foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.
     </div>
   </div>
   <div>
     <!--[-->
     <div class="van-text-ellipsis">
+      Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.
     </div>
   </div>
 </div>