feat(CollapseItem): add toggle method (#7281)

* feat(CollapseItem): add toggle method

* chore: update doc

src/collapse/README.md

@@ -126,3 +126,11 @@ export default {
 | icon       | Custom icon       |
 | title      | Custom title      |
 | right-icon | Custom right icon |
+
+### CollapseItem Methods
+
+Use [ref](https://vuejs.org/v2/api/#ref) to get CollapseItem instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - |

src/collapse/README.zh-CN.md

@@ -117,10 +117,18 @@ export default {
 
 ### CollapseItem Slots
 
-| 名称       | 说明                          |
-| ---------- | ----------------------------- |
-| default    | 面板内容                      |
-| value      | 自定义显示内容                |
-| icon       | 自定义`icon`                  |
-| title      | 自定义`title`                 |
-| right-icon | 自定义右侧按钮，默认是`arrow` |
+| 名称       | 说明                           |
+| ---------- | ------------------------------ |
+| default    | 面板内容                       |
+| value      | 自定义显示内容                 |
+| icon       | 自定义 `icon`                  |
+| title      | 自定义 `title`                 |
+| right-icon | 自定义右侧按钮，默认是 `arrow` |
+
+### CollapseItem 方法
+
+通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |

src/collapse/test/index.spec.js

@@ -144,3 +144,61 @@ test('warn when value type is incorrect', () => {
   expect(error).toHaveBeenCalledTimes(1);
   console.error = originConsoleError;
 });
+
+test('toggle method', (done) => {
+  mount({
+    template: `
+    <van-collapse v-model="active" >
+      <van-collapse-item name="a" ref="a" />
+      <van-collapse-item name="b" ref="b" />
+    </van-collapse>
+  `,
+    data() {
+      return { active: [] };
+    },
+    mounted() {
+      this.$refs.a.toggle();
+      expect(this.active).toEqual(['a']);
+
+      this.$refs.b.toggle();
+      expect(this.active).toEqual(['a', 'b']);
+
+      this.$refs.b.toggle(false);
+      expect(this.active).toEqual(['a']);
+
+      this.$refs.a.toggle();
+      expect(this.active).toEqual([]);
+
+      done();
+    },
+  });
+});
+
+test('toggle method in accordion mode', (done) => {
+  mount({
+    template: `
+    <van-collapse v-model="active" accordion>
+      <van-collapse-item name="a" ref="a" />
+      <van-collapse-item name="b" ref="b" />
+    </van-collapse>
+  `,
+    data() {
+      return { active: '' };
+    },
+    mounted() {
+      this.$refs.a.toggle();
+      expect(this.active).toEqual('a');
+
+      this.$refs.b.toggle();
+      expect(this.active).toEqual('b');
+
+      this.$refs.b.toggle(false);
+      expect(this.active).toEqual('');
+
+      this.$refs.a.toggle();
+      expect(this.active).toEqual('a');
+
+      done();
+    },
+  });
+});