docs: add @landluck and @wjw-gavin to core team (#11622)

* chore: add menu

* feat(Ellipsis): add Ellipsis component

* style: improve style

* chore: improve resize observer

* chore: improve code

* chore: rename to text-ellipsis

README.md

@@ -124,9 +124,13 @@ You can scan the following QR code to access the demo：
 
 Core contributors of Vant and Vant Weapp:
 
-| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) | [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![nemo-shen](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) |
-| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
-| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) |
+
+| [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![JakeLaoyu](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) | [![landluck](https://avatars.githubusercontent.com/u/27060081?s=80&v=4)](https://github.com/landluck/) | [![wjw-gavin](https://avatars.githubusercontent.com/u/19986739?s=80&v=4)](https://github.com/wjw-gavin/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) | [landluck](https://github.com/landluck/) | [wjw-gavin](https://github.com/wjw-gavin/) |
 
 ## All Contributors
 

README.zh-CN.md

@@ -133,9 +133,13 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 以下是 Vant 和 Vant Weapp 的核心贡献者们：
 
-| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) | [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![nemo-shen](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) |
-| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
-| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) |
+
+| [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![JakeLaoyu](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) | [![landluck](https://avatars.githubusercontent.com/u/27060081?s=80&v=4)](https://github.com/landluck/) | [![wjw-gavin](https://avatars.githubusercontent.com/u/19986739?s=80&v=4)](https://github.com/wjw-gavin/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) | [landluck](https://github.com/landluck/) | [wjw-gavin](https://github.com/wjw-gavin/) |
 
 ## 贡献者们
 

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -31,7 +31,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vant/cli": "^5.0.0",
+    "@vant/cli": "^6.0.0",
     "vue": "^3.0.0",
     "sass": "^1.49.7"
   },

packages/create-vant-cli-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vant-cli-app",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {

packages/vant-cli/changelog.md

@@ -1,11 +1,14 @@
 # 更新日志
 
-## v6.0.0 [unreleased]
+## v6.0.0
+
+`2023-02-26`
 
 - vite: 由 v3 升级至 v4
 - @vitejs/plugin-vue: 由 v3 升级至 v4
 - @vitejs/plugin-vue-jsx: 由 v2 升级至 v3
 - 移除 `site.searchConfig` 配置项
+- 修复 build 时解析 markdown 可能报错的问题
 
 ## v5.1.0
 

packages/vant-cli/docs/config.md

@@ -219,7 +219,7 @@ If you need to configure some vite plugins, please create a `vite.config.ts` fil
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm'`
-- Default: `undefined`
+- Default: `yarn`
 
 `npm` package manager.
 

packages/vant-cli/docs/config.zh-CN.md

@@ -221,7 +221,7 @@ module.exports = {
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm'`
-- Default: `undefined`
+- Default: `yarn`
 
 指定使用的包管理器。
 

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

packages/vant-cli/src/compiler/web-types/formatter.ts

@@ -29,9 +29,15 @@ function formatArguments(input: string): VueEventArgument[] {
     } else if ([':', ',', '_', ' '].includes(input[0])) {
       input = input.substring(1);
     } else {
-      const val = input.match(/( |'|\||\w)+/)![0] || '';
-      input = input.substring(val.length);
-      items.push(val);
+      const matched = input.match(/( |'|\||\w)+/);
+
+      if (matched?.length && matched[0]) {
+        const val = matched[0];
+        input = input.substring(val.length);
+        items.push(val);
+      } else {
+        input = '';
+      }
     }
   }
 

packages/vant/docs/markdown/home.en-US.md

@@ -81,9 +81,13 @@ The current maintenance status of each version of Vant is as follows:
 
 Core contributors of Vant and Vant Weapp:
 
-| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) | [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![nemo-shen](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) |
-| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
-| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) |
+
+| [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![JakeLaoyu](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) | [![landluck](https://avatars.githubusercontent.com/u/27060081?s=80&v=4)](https://github.com/landluck/) | [![wjw-gavin](https://avatars.githubusercontent.com/u/19986739?s=80&v=4)](https://github.com/wjw-gavin/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) | [landluck](https://github.com/landluck/) | [wjw-gavin](https://github.com/wjw-gavin/) |
 
 ### All Contributors
 

packages/vant/docs/markdown/home.zh-CN.md

@@ -96,9 +96,13 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 以下是 Vant 和 Vant Weapp 的核心贡献者们：
 
-| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) | [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![nemo-shen](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) |
-| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
-| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+| [![chenjiahan](https://avatars.githubusercontent.com/u/7237365?s=80&v=4)](https://github.com/chenjiahan/) | [![cookfront](https://avatars.githubusercontent.com/u/4829465?s=80&v=4)](https://github.com/cookfront/) | [![w91](https://avatars.githubusercontent.com/u/2599455?s=80&v=4)](https://github.com/w91/) | [![pangxie1991](https://avatars.githubusercontent.com/u/5961240?s=80&v=4)](https://github.com/pangxie1991/) | [![rex-zsd](https://avatars.githubusercontent.com/u/8767877?s=80&v=4)](https://github.com/rex-zsd/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) |
+
+| [![nemo-shen](https://avatars.githubusercontent.com/u/13480805?s=80&v=4)](https://github.com/nemo-shen/) | [![Lindysen](https://avatars.githubusercontent.com/u/33708359?s=80&v=4)](https://github.com/Lindysen/) | [![JakeLaoyu](https://avatars.githubusercontent.com/u/16181940?s=80&v=4)](https://github.com/JakeLaoyu/) | [![landluck](https://avatars.githubusercontent.com/u/27060081?s=80&v=4)](https://github.com/landluck/) | [![wjw-gavin](https://avatars.githubusercontent.com/u/19986739?s=80&v=4)](https://github.com/wjw-gavin/) |
+| :-: | :-: | :-: | :-: | :-: |
+| [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) | [landluck](https://github.com/landluck/) | [wjw-gavin](https://github.com/wjw-gavin/) |
 
 ### 贡献者们
 

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

@@ -0,0 +1,118 @@
+# TextEllipsis
+
+### Intro
+
+Display ellipsis for long text and support for expanding or collapsing text.
+
+### Install
+
+Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
+
+```js
+import { createApp } from 'vue';
+import { TextEllipsis } from 'vant';
+
+const app = createApp();
+app.use(TextEllipsis);
+```
+
+## Usage
+
+### Basic Usage
+
+Show one rows by default.
+
+```html
+<van-text-ellipsis :content="text" />
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      '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.';
+    return { text };
+  },
+};
+```
+
+### Expand/Collapse
+
+Support Expand/Collapse.
+
+```html
+<van-text-ellipsis
+  :content="text"
+  expand-text="expand"
+  collapse-text="collapse"
+/>
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      '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.';
+    return { text };
+  },
+};
+```
+
+### Customize rows
+
+Display the number of `rows` by setting rows.
+
+```html
+<van-text-ellipsis
+  rows="3"
+  :content="text"
+  expand-text="expand"
+  collapse-text="collapse"
+/>
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      '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.';
+    return { text };
+  },
+};
+```
+
+## API
+
+### Props
+
+| Attribute     | Description              | Type               | Default |
+| ------------- | ------------------------ | ------------------ | ------- |
+| rows          | Number of rows displayed | _number \| string_ | `1`     |
+| content       | The text displayed       | _string_           | -       |
+| expand-text   | Expand operation text    | _string_           | -       |
+| collapse-text | Collapse operation text  | _string_           | -       |
+
+### Events
+
+| Event        | Description                             | Arguments           |
+| ------------ | --------------------------------------- | ------------------- |
+| click-action | Emitted when Expand/Collapse is clicked | _event: MouseEvent_ |
+
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
+```
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name                             | Default Value     | Description          |
+| -------------------------------- | ----------------- | -------------------- |
+| --van-text-ellipsis-action-color | _var(--van-blue)_ | Color of action text |
+| --van-text-ellipsis-line-height  | _1.6_             | Line height of text  |

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

@@ -0,0 +1,114 @@
+# TextEllipsis 文本省略
+
+### 介绍
+
+对长文本进行省略，支持展开/收起。
+
+### 引入
+
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
+
+```js
+import { createApp } from 'vue';
+import { TextEllipsis } from 'vant';
+
+const app = createApp();
+app.use(TextEllipsis);
+```
+
+## 代码演示
+
+### 基础用法
+
+默认展示 `1` 行，超过 `1` 行显示省略号。
+
+```html
+<van-text-ellipsis :content="text" />
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。';
+    return { text };
+  },
+};
+```
+
+### 展开/收起
+
+超过行数支持展开/收起。
+
+```html
+<van-text-ellipsis :content="text" expand-text="展开" collapse-text="收起" />
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。';
+    return { text };
+  },
+};
+```
+
+### 自定义展示行数
+
+通过设置 `rows` 限制展示行数。
+
+```html
+<van-text-ellipsis
+  rows="3"
+  :content="text"
+  expand-text="展开"
+  collapse-text="收起"
+/>
+```
+
+```js
+export default {
+  setup() {
+    const text =
+      'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。';
+    return { text };
+  },
+};
+```
+
+## API
+
+### Props
+
+| 参数          | 说明           | 类型               | 默认值 |
+| ------------- | -------------- | ------------------ | ------ |
+| rows          | 展示的行数     | _number \| string_ | `1`    |
+| content       | 需要展示的文本 | _string_           | -      |
+| expand-text   | 展开操作的文案 | _string_           | -      |
+| collapse-text | 收起操作的文案 | _string_           | -      |
+
+### Events
+
+| 事件         | 说明                | 回调参数            |
+| ------------ | ------------------- | ------------------- |
+| click-action | 点击展开/收起时触发 | _event: MouseEvent_ |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
+```
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                             | 默认值            | 描述           |
+| -------------------------------- | ----------------- | -------------- |
+| --van-text-ellipsis-action-color | _var(--van-blue)_ | 操作按钮的颜色 |
+| --van-text-ellipsis-line-height  | _1.6_             | 文本的行高     |

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

@@ -0,0 +1,138 @@
+import {
+  ref,
+  watch,
+  onMounted,
+  defineComponent,
+  type ExtractPropTypes,
+} from 'vue';
+
+// Composables
+import { useEventListener } from '@vant/use';
+
+// Utils
+import { makeNumericProp, makeStringProp, createNamespace } from '../utils';
+
+const [name, bem] = createNamespace('text-ellipsis');
+
+export const textEllipsisProps = {
+  rows: makeNumericProp(1),
+  content: makeStringProp(''),
+  expandText: makeStringProp(''),
+  collapseText: makeStringProp(''),
+};
+
+export type TextEllipsisProps = ExtractPropTypes<typeof textEllipsisProps>;
+
+export default defineComponent({
+  name,
+
+  inheritAttrs: false,
+
+  props: textEllipsisProps,
+
+  emits: ['clickAction'],
+
+  setup(props, { emit }) {
+    const text = ref('');
+    const expanded = ref(false);
+    const hasAction = ref(false);
+    const root = ref<HTMLElement>();
+
+    const pxToNum = (value: string | null) => {
+      if (!value) return 0;
+      const match = value.match(/^\d*(\.\d*)?/);
+      return match ? Number(match[0]) : 0;
+    };
+
+    const calcEllipsised = () => {
+      const cloneContainer = () => {
+        if (!root.value) return;
+
+        const originStyle = window.getComputedStyle(root.value);
+        const container = document.createElement('div');
+        const styleNames: string[] = Array.prototype.slice.apply(originStyle);
+        styleNames.forEach((name) => {
+          container.style.setProperty(name, originStyle.getPropertyValue(name));
+        });
+
+        container.style.position = 'fixed';
+        container.style.zIndex = '-9999';
+        container.style.top = '-9999px';
+        container.style.height = 'auto';
+        container.style.minHeight = 'auto';
+        container.style.maxHeight = 'auto';
+
+        container.innerText = props.content;
+        document.body.appendChild(container);
+        return container;
+      };
+
+      const calcEllipsisText = (
+        container: HTMLDivElement,
+        maxHeight: number
+      ) => {
+        const { content, expandText } = props;
+        const dot = '...';
+        let left = 0;
+        let right = content.length;
+        let res = -1;
+
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          container.innerText = content.slice(0, mid) + dot + expandText;
+          if (container.offsetHeight <= maxHeight) {
+            left = mid + 1;
+            res = mid;
+          } else {
+            right = mid - 1;
+          }
+        }
+        return content.slice(0, res) + dot;
+      };
+
+      const container = cloneContainer();
+      if (!container) return;
+
+      const { paddingBottom, paddingTop, lineHeight } = container.style;
+      const maxHeight =
+        (Number(props.rows) + 0.5) * pxToNum(lineHeight) +
+        pxToNum(paddingTop) +
+        pxToNum(paddingBottom);
+      if (maxHeight < container.offsetHeight) {
+        hasAction.value = true;
+        text.value = calcEllipsisText(container, maxHeight);
+      } else {
+        hasAction.value = false;
+        text.value = props.content;
+      }
+
+      document.body.removeChild(container);
+    };
+
+    const onClickAction = (event: MouseEvent) => {
+      expanded.value = !expanded.value;
+      emit('clickAction', event);
+    };
+
+    const renderAction = () => (
+      <span class={bem('action')} onClick={onClickAction}>
+        {expanded.value ? props.collapseText : props.expandText}
+      </span>
+    );
+
+    onMounted(() => {
+      calcEllipsised();
+    });
+
+    watch(() => [props.content, props.rows], calcEllipsised);
+
+    useEventListener('resize', calcEllipsised);
+
+    return () => (
+      <div ref={root} class={bem()}>
+        {expanded.value ? props.content : text.value}
+        {hasAction.value ? renderAction() : null}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import VanTextEllipsis from '..';
+import { useTranslate } from '../../../docs/site';
+
+const textCN =
+  'Vant 是一个轻量、可定制的移动端组件库，于2017年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。';
+const textUS =
+  '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.';
+
+const t = useTranslate({
+  'zh-CN': {
+    text: textCN,
+    expandText: '展开',
+    collapseText: '收起',
+    expandCollapse: '展开/收起',
+    customRows: '自定义展示行数',
+  },
+  'en-US': {
+    text: textUS,
+    expandText: 'expand',
+    collapseText: 'collapse',
+    expandCollapse: 'Expand/Collapse',
+    customRows: 'Customize Rows',
+  },
+});
+</script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-text-ellipsis :content="t('text')" />
+  </demo-block>
+
+  <demo-block :title="t('expandCollapse')">
+    <van-text-ellipsis
+      :content="t('text')"
+      :expand-text="t('expandText')"
+      :collapse-text="t('collapseText')"
+    />
+  </demo-block>
+
+  <demo-block :title="t('customRows')">
+    <van-text-ellipsis
+      rows="3"
+      :content="t('text')"
+      :expand-text="t('expandText')"
+      :collapse-text="t('collapseText')"
+    />
+  </demo-block>
+</template>
+
+<style lang="less">
+.demo-text-ellipsis {
+  font-size: 15px;
+  background-color: var(--van-background-2);
+
+  .van-text-ellipsis {
+    padding: 0 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,18 @@
+:root {
+  --van-text-ellipsis-line-height: 1.6;
+  --van-text-ellipsis-action-color: var(--van-blue);
+}
+
+.van-text-ellipsis {
+  line-height: var(--van-text-ellipsis-line-height);
+  white-space: pre-wrap;
+
+  &__action {
+    cursor: pointer;
+    color: var(--van-text-ellipsis-action-color);
+
+    &:active {
+      opacity: var(--van-active-opacity);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { withInstall } from '../utils';
+import _TextEllipsis from './TextEllipsis';
+
+export const TextEllipsis = withInstall(_TextEllipsis);
+export default TextEllipsis;
+export { textEllipsisProps } from './TextEllipsis';
+
+export type { TextEllipsisProps } from './TextEllipsis';
+export type { TextEllipsisThemeVars } from './types';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanTextEllipsis: typeof TextEllipsis;
+  }
+}

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <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">
+    </span>
+  </div>
+</div>
+<div>
+  <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>
+</div>
+<div>
+  <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>
+</div>
+`;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render content correctly 1`] = `
+<div class="van-text-ellipsis">
+  Vant is a lightweight, customizable mobile component library th...
+  <span class="van-text-ellipsis__action">
+  </span>
+</div>
+`;

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

@@ -0,0 +1,4 @@
+import Demo from '../demo/index.vue';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

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

@@ -0,0 +1,91 @@
+import { mount } from '../../../test';
+import { nextTick } from 'vue';
+import TextEllipsis from '..';
+
+const originGetComputedStyle = window.getComputedStyle;
+
+const lineHeight = 20;
+
+const content =
+  '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.';
+
+beforeAll(() => {
+  window.getComputedStyle = (el) => {
+    const style = originGetComputedStyle(el);
+    style.lineHeight = `${lineHeight}px`;
+    return style;
+  };
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    get() {
+      if (this.innerText.includes('...')) {
+        const row = Math.ceil(
+          (this.innerText.replace(/\.\.\./g, '中').length / content.length) * 4
+        );
+        return lineHeight * row;
+      }
+      return lineHeight * 4;
+    },
+  });
+});
+
+afterAll(() => {
+  window.getComputedStyle = originGetComputedStyle;
+});
+
+test('should render content correctly', async () => {
+  const wrapper = mount(TextEllipsis, {
+    props: {
+      content,
+    },
+  });
+
+  await nextTick();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('Expand and Collapse should be work', async () => {
+  const wrapper = mount(TextEllipsis, {
+    props: {
+      content,
+      expandText: 'expand',
+      collapseText: 'collapse',
+    },
+  });
+
+  await nextTick();
+  expect(wrapper.text()).toMatch('...');
+  await wrapper.find('.van-text-ellipsis__action').trigger('click');
+  expect(wrapper.text()).not.toMatch('...');
+});
+
+test('should emit click event after Expand/Collapse is clicked', async () => {
+  const wrapper = mount(TextEllipsis, {
+    props: {
+      content,
+      expandText: 'expand',
+      collapseText: 'collapse',
+    },
+  });
+
+  await nextTick();
+  await wrapper.find('.van-text-ellipsis__action').trigger('click');
+  expect(wrapper.emitted('click')).toHaveLength(1);
+});
+
+test('text not exceeded', async () => {
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    value: lineHeight,
+  });
+
+  const shortContent = 'Vant is a component library';
+  const wrapper = mount(TextEllipsis, {
+    props: {
+      content: shortContent,
+      expandText: 'expand',
+      collapseText: 'collapse',
+    },
+  });
+
+  await nextTick();
+  expect(wrapper.text()).not.toMatch('...');
+});

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

@@ -0,0 +1,3 @@
+export type TextEllipsisThemeVars = {
+  textEllipsisActionColor?: string;
+};

packages/vant/vant.config.mjs

@@ -340,6 +340,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
                 path: 'tag',
                 title: 'Tag 标签',
               },
+              {
+                path: 'text-ellipsis',
+                title: 'TextEllipsis 文本省略',
+              },
             ],
           },
           {
@@ -482,7 +486,8 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
       'en-US': {
         title: 'Vant 4',
         subtitle: ' (for Vue 3)',
-        description: 'A lightweight, customizable Vue UI library for mobile web apps.',
+        description:
+          'A lightweight, customizable Vue UI library for mobile web apps.',
         logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
         langLabel: 'EN',
         links: [
@@ -775,6 +780,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
                 path: 'tag',
                 title: 'Tag',
               },
+              {
+                path: 'text-ellipsis',
+                title: 'TextEllipsis',
+              },
             ],
           },
           {