diff --git a/packages/vant/src/text-ellipsis/README.md b/packages/vant/src/text-ellipsis/README.md index aa0bd6aeb..15203a36f 100644 --- a/packages/vant/src/text-ellipsis/README.md +++ b/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(); + +textEllipsisRef.value?.toggle(); ``` ## Theming diff --git a/packages/vant/src/text-ellipsis/README.zh-CN.md b/packages/vant/src/text-ellipsis/README.zh-CN.md index 5352dd958..fd4ed10ba 100644 --- a/packages/vant/src/text-ellipsis/README.zh-CN.md +++ b/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(); + +textEllipsisRef.value?.toggle(); ``` ## 主题定制 diff --git a/packages/vant/src/text-ellipsis/TextEllipsis.tsx b/packages/vant/src/text-ellipsis/TextEllipsis.tsx index 1f2ff69bf..a204f48d6 100644 --- a/packages/vant/src/text-ellipsis/TextEllipsis.tsx +++ b/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 () => (
{expanded.value ? props.content : text.value} diff --git a/packages/vant/src/text-ellipsis/index.ts b/packages/vant/src/text-ellipsis/index.ts index f04b7e300..836363747 100644 --- a/packages/vant/src/text-ellipsis/index.ts +++ b/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 { diff --git a/packages/vant/src/text-ellipsis/types.ts b/packages/vant/src/text-ellipsis/types.ts index c5e2f5297..4a08f939b 100644 --- a/packages/vant/src/text-ellipsis/types.ts +++ b/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; };