Merge branch 'dev' into next

This commit is contained in:
chenjiahan
2020-10-02 08:50:37 +08:00
57 changed files with 500 additions and 270 deletions
+8
View File
@@ -127,3 +127,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_ | - |
+19 -7
View File
@@ -1,5 +1,9 @@
# Collapse 折叠面板
### 介绍
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
### 引入
```js
@@ -118,10 +122,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_ | - |
+58
View File
@@ -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();
},
});
});