feat(TextEllipsis): add action slot (#12560)

Co-authored-by: neverland <chenjiahan.jait@bytedance.com>

packages/vant/src/text-ellipsis/README.md

@@ -127,6 +127,28 @@ export default {
 };
 ```
 
+### Custom Action
+
+Use `action` slots to custom action.
+
+```html
+<van-text-ellipsis :content="text">
+  <template #action="{ expanded }">
+    {{ expanded ? 'Collapse' : 'Expand' }}
+  </template>
+</van-text-ellipsis>
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
+    return { text };
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -154,6 +176,12 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get TextElli
 | ------ | ---------------------- | -------------------- | ------------ |
 | toggle | Toggle expanded status | _expanded?: boolean_ | -            |
 
+### Slots
+
+| Name            | Description   | SlotProps               |
+| --------------- | ------------- | ----------------------- |
+| action `v4.8.3` | Custom action | _{ expanded: boolean }_ |
+
 ### Types
 
 The component exports the following type definitions:

packages/vant/src/text-ellipsis/README.zh-CN.md

@@ -124,6 +124,25 @@ export default {
 };
 ```
 
+### 自定义操作内容
+
+通过插槽 `action` 自定义操作内容。
+
+```html
+<van-text-ellipsis :content="text">
+  <template #action="{ expanded }">{{ expanded ? '收起' : '展开' }}</template>
+</van-text-ellipsis>
+```
+
+```js
+export default {
+  setup() {
+    const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
+    return { text };
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -151,6 +170,12 @@ export default {
 | --- | --- | --- | --- |
 | toggle | 切换文本的展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expanded?: boolean_ | - |
 
+### Slots
+
+| 名称            | 说明       | 参数                    |
+| --------------- | ---------- | ----------------------- |
+| action `v4.8.3` | 自定义操作 | _{ expanded: boolean }_ |
+
 ### 类型定义
 
 组件导出以下类型定义：

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

@@ -37,7 +37,7 @@ export default defineComponent({
 
   emits: ['clickAction'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const text = ref('');
     const expanded = ref(false);
     const hasAction = ref(false);
@@ -196,11 +196,16 @@ export default defineComponent({
       emit('clickAction', event);
     };
 
-    const renderAction = () => (
+    const renderAction = () => {
-      <span class={bem('action')} onClick={onClickAction}>
+      const action = slots.action
-        {actionText.value}
+        ? slots.action({ expanded: expanded.value })
-      </span>
+        : actionText.value;
-    );
+      return (
+        <span class={bem('action')} onClick={onClickAction}>
+          {action}
+        </span>
+      );
+    };
 
     onMounted(calcEllipsised);
 

packages/vant/src/text-ellipsis/demo/index.vue

@@ -16,6 +16,7 @@ const t = useTranslate({
     collapsePosition: '自定义省略位置',
     collapseStart: '头部省略',
     collapseMiddle: '中部省略',
+    customAction: '自定义操作内容',
   },
   'en-US': {
     text1:
@@ -31,6 +32,7 @@ const t = useTranslate({
     collapsePosition: 'Custom Collapse Position',
     collapseStart: 'Head Area Collapse Position',
     collapseMiddle: 'Middle Area Collapse Position',
+    customAction: 'Custom Action',
   },
 });
 </script>
@@ -77,6 +79,14 @@ const t = useTranslate({
         position="middle"
       />
     </demo-block>
+
+    <demo-block :title="t('customAction')">
+      <van-text-ellipsis :content="t('text1')">
+        <template #action="{ expanded }">
+          {{ expanded ? t('collapseText') : t('expandText') }}
+        </template>
+      </van-text-ellipsis>
+    </demo-block>
   </demo-block>
 </template>
 

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

@@ -29,5 +29,10 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-text-ellipsis">
     </div>
   </div>
+  <div>
+    <!--[-->
+    <div class="van-text-ellipsis">
+    </div>
+  </div>
 </div>
 `;

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

@@ -41,5 +41,13 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
   </div>
+  <div>
+    <div class="van-text-ellipsis">
+      ...
+      <span class="van-text-ellipsis__action">
+        expand
+      </span>
+    </div>
+  </div>
 </div>
 `;

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

@@ -1,5 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`should render action slot correctly 1`] = `
+<div class="van-text-ellipsis">
+  Vant is a lightweight, customizable mobile component library th...
+  <span class="van-text-ellipsis__action">
+    Collapse
+  </span>
+</div>
+`;
+
+exports[`should render action slot correctly 2`] = `
+<div class="van-text-ellipsis">
+  Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.
+  <span class="van-text-ellipsis__action">
+    Expand
+  </span>
+</div>
+`;
+
+exports[`should render action slot correctly 3`] = `
+<div class="van-text-ellipsis">
+  Vant is a lightweight, customizable mobile component library th...
+  <span class="van-text-ellipsis__action">
+    Collapse
+  </span>
+</div>
+`;
+
 exports[`should render content correctly 1`] = `
 <div class="van-text-ellipsis">
   Vant is a lightweight, customizable mobile component library th...

packages/vant/src/text-ellipsis/test/index.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from '../../../test';
 import { nextTick } from 'vue';
-import TextEllipsis from '..';
+import TextEllipsis, { type TextEllipsisInstance } from '..';
 
 const originGetComputedStyle = window.getComputedStyle;
 
@@ -32,6 +32,29 @@ afterAll(() => {
   window.getComputedStyle = originGetComputedStyle;
 });
 
+test('should render action slot correctly', async () => {
+  const wrapper = mount(TextEllipsis, {
+    props: {
+      content,
+    },
+    slots: {
+      action: ({ expanded }) => (expanded ? 'Expand' : 'Collapse'),
+    },
+  });
+
+  await nextTick();
+
+  expect(wrapper.html()).toMatchSnapshot();
+
+  (wrapper.vm as TextEllipsisInstance).toggle();
+  await nextTick();
+  expect(wrapper.html()).toMatchSnapshot();
+
+  (wrapper.vm as TextEllipsisInstance).toggle();
+  await nextTick();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 test('should render content correctly', async () => {
   const wrapper = mount(TextEllipsis, {
     props: {