Merge branch 'dev' into next
This commit is contained in:
@@ -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_ | - |
|
||||
|
||||
@@ -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_ | - |
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user