feat(TextEllipsis): add the toggle instance method (#12472)

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

@@ -146,12 +146,35 @@ export default {
 | ------------ | --------------------------------------- | ------------------- |
 | click-action | Emitted when Expand/Collapse is clicked | _event: MouseEvent_ |
 
+### Methods
+
+Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get TextEllipsis instance and call instance methods.
+
+| Name   | Description            | Attribute            | Return value |
+| ------ | ---------------------- | -------------------- | ------------ |
+| toggle | Toggle expanded status | _expanded?: boolean_ | -            |
+
 ### Types
 
 The component exports the following type definitions:
 
 ```ts
-import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
+import type {
+  TextEllipsisProps,
+  TextEllipsisInstance,
+  TextEllipsisThemeVars,
+} from 'vant';
+```
+
+`TextEllipsisInstance` is the type of component instance:
+
+```ts
+import { ref } from 'vue';
+import type { TextEllipsisInstance } from 'vant';
+
+const textEllipsisRef = ref<TextEllipsisInstance>();
+
+textEllipsisRef.value?.toggle();
 ```
 
 ## Theming

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

@@ -143,12 +143,35 @@ export default {
 | ------------ | ------------------- | ------------------- |
 | click-action | 点击展开/收起时触发 | _event: MouseEvent_ |
 
+### TextEllipsis 方法
+
+通过 ref 可以获取到 TextEllipsis 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggle | 切换文本的展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expanded?: boolean_ | - |
+
 ### 类型定义
 
 组件导出以下类型定义：
 
 ```ts
-import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
+import type {
+  TextEllipsisProps,
+  TextEllipsisInstance,
+  TextEllipsisThemeVars,
+} from 'vant';
+```
+
+`TextEllipsisInstance` 是组件实例的类型，用法如下：
+
+```ts
+import { ref } from 'vue';
+import type { TextEllipsisInstance } from 'vant';
+
+const textEllipsisRef = ref<TextEllipsisInstance>();
+
+textEllipsisRef.value?.toggle();
 ```
 
 ## 主题定制

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

@@ -15,6 +15,8 @@ import {
   windowWidth,
 } from '../utils';
 
+import { useExpose } from '../composables/use-expose';
+
 const [name, bem] = createNamespace('text-ellipsis');
 
 export const textEllipsisProps = {
@@ -185,8 +187,12 @@ export default defineComponent({
       document.body.removeChild(container);
     };
 
+    const toggle = (isExpanded = !expanded.value) => {
+      expanded.value = isExpanded;
+    };
+
     const onClickAction = (event: MouseEvent) => {
-      expanded.value = !expanded.value;
+      toggle();
       emit('clickAction', event);
     };
 
@@ -203,6 +209,8 @@ export default defineComponent({
       calcEllipsised,
     );
 
+    useExpose({ toggle });
+
     return () => (
       <div ref={root} class={bem()}>
         {expanded.value ? props.content : text.value}

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

@@ -6,7 +6,7 @@ export default TextEllipsis;
 export { textEllipsisProps } from './TextEllipsis';
 
 export type { TextEllipsisProps } from './TextEllipsis';
-export type { TextEllipsisThemeVars } from './types';
+export type { TextEllipsisInstance, TextEllipsisThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/text-ellipsis/types.ts

@@ -1,3 +1,15 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { TextEllipsisProps } from './TextEllipsis';
+
+export type TextEllipsisExpose = {
+  toggle: () => void;
+};
+
+export type TextEllipsisInstance = ComponentPublicInstance<
+  TextEllipsisProps,
+  TextEllipsisExpose
+>;
+
 export type TextEllipsisThemeVars = {
   textEllipsisActionColor?: string;
 };