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,13 +81,13 @@ export default defineComponent({
       return container;
     };
 
-    const calcEllipsised = () => {
-      const calcEllipsisText = (
-        container: HTMLDivElement,
-        maxHeight: number,
-      ) => {
+    const calcEllipsisText = (container: HTMLDivElement, maxHeight: number) => {
       const { content, position, dots } = props;
       const end = content.length;
+      const middle = (0 + end) >> 1;
+      const actionHTML = slots.action
+        ? actionRef.value?.outerHTML ?? ''
+        : props.expandText;
 
       const calcEllipse = () => {
         // calculate the former or later content
@@ -101,13 +103,13 @@ export default defineComponent({
 
           // Set the interception location
           if (position === 'end') {
-              container.innerText =
-                content.slice(0, middle) + dots + actionText.value;
+            container.innerText = content.slice(0, middle) + dots;
           } else {
-              container.innerText =
-                dots + content.slice(middle, end) + actionText.value;
+            container.innerText = dots + content.slice(middle, end);
           }
 
+          container.innerHTML += actionHTML;
+
           // The height after interception still does not match the rquired height
           if (container.offsetHeight > maxHeight) {
             if (position === 'end') {
@@ -123,7 +125,7 @@ export default defineComponent({
           return tail(left, middle);
         };
 
-          container.innerText = tail(0, end);
+        return tail(0, end);
       };
 
       const middleTail = (
@@ -147,8 +149,8 @@ export default defineComponent({
         container.innerText =
           props.content.slice(0, leftMiddle) +
           props.dots +
-            props.content.slice(rightMiddle, end) +
-            props.expandText;
+          props.content.slice(rightMiddle, end);
+        container.innerHTML += actionHTML;
 
         if (container.offsetHeight >= maxHeight) {
           return middleTail(
@@ -163,13 +165,12 @@ export default defineComponent({
         );
       };
 
-        const middle = (0 + end) >> 1;
-        props.position === 'middle'
-          ? (container.innerText = middleTail([0, middle], [middle, end]))
+      return props.position === 'middle'
+        ? middleTail([0, middle], [middle, end])
         : calcEllipse();
-        return container.innerText;
     };
 
+    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>