blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Collapse): fix snapshot and update document (#10845)

Browse Source
This commit is contained in:
neverland 2022-07-24 18:13:47 +08:00 committed by GitHub
parent e45ac25ac0
commit a1d4297c92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 336 additions and 591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/vant/src/checkbox/README.md
View File

@ -301,21 +301,24 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
### toggleAll Usage ### toggleAll Usage
```js ```js
const { checkboxGroup } = this.$refs; import { ref } from 'vue';
import type { CheckboxGroupInstance } from 'vant';
const checkboxGroupRef = ref<CheckboxGroupInstance>();
// Toggle all // Toggle all
checkboxGroup.toggleAll(); checkboxGroup.value?.toggleAll();
// Select all // Select all
checkboxGroup.toggleAll(true); checkboxGroup.value?.toggleAll(true);
// Unselect all // Unselect all
checkboxGroup.toggleAll(false); checkboxGroup.value?.toggleAll(false);
// Toggle all, skip disabled // Toggle all, skip disabled
checkboxGroup.toggleAll({ checkboxGroup.value?.toggleAll({
skipDisabled: true, skipDisabled: true,
}); });
// Select all, skip disabled // Select all, skip disabled
checkboxGroup.toggleAll({ checkboxGroup.value?.toggleAll({
checked: true, checked: true,
skipDisabled: true, skipDisabled: true,
}); });

15
packages/vant/src/checkbox/README.zh-CN.md
View File

@ -318,21 +318,24 @@ export default {
### toggleAll 方法示例 ### toggleAll 方法示例
```js ```js
const { checkboxGroup } = this.$refs; import { ref } from 'vue';
import type { CheckboxGroupInstance } from 'vant';
const checkboxGroupRef = ref<CheckboxGroupInstance>();
// 全部反选 // 全部反选
checkboxGroup.toggleAll(); checkboxGroupRef?.value.toggleAll();
// 全部选中 // 全部选中
checkboxGroup.toggleAll(true); checkboxGroupRef?.value.toggleAll(true);
// 全部取消 // 全部取消
checkboxGroup.toggleAll(false); checkboxGroupRef?.value.toggleAll(false);
// 全部反选，并跳过禁用的复选框 // 全部反选，并跳过禁用的复选框
checkboxGroup.toggleAll({ checkboxGroupRef?.value.toggleAll({
skipDisabled: true, skipDisabled: true,
}); });
// 全部选中，并跳过禁用的复选框 // 全部选中，并跳过禁用的复选框
checkboxGroup.toggleAll({ checkboxGroupRef?.value.toggleAll({
checked: true, checked: true,
skipDisabled: true, skipDisabled: true,
}); });

3
packages/vant/src/collapse/Collapse.tsx
View File

@ -96,9 +96,11 @@ export default defineComponent({
if (props.accordion) { if (props.accordion) {
return; return;
} }
if (typeof options === 'boolean') { if (typeof options === 'boolean') {
options = { expanded: options }; options = { expanded: options };
} }
const { expanded, skipDisabled } = options!; const { expanded, skipDisabled } = options!;
const expandedChildren = children.filter((item: any) => { const expandedChildren = children.filter((item: any) => {
if (item.disabled && skipDisabled) { if (item.disabled && skipDisabled) {
@ -106,6 +108,7 @@ export default defineComponent({
} }
return expanded ?? !item.expanded.value; return expanded ?? !item.expanded.value;
}); });
const names = expandedChildren.map((item) => item.itemName.value); const names = expandedChildren.map((item) => item.itemName.value);
updateName(names); updateName(names);
}; };

25
packages/vant/src/collapse/README.md
View File

@ -110,7 +110,7 @@ export default {
### Toggle All ### Toggle All
通过 `Collapse` 实例上的 `toggleAll` 方法可以实现全选与反选。 Using `toggleAll` method to toggle all items.
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
@ -119,8 +119,8 @@ export default {
<van-collapse-item title="Title3" name="3">Content 3</van-collapse-item> <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
</van-collapse> </van-collapse>
<van-button type="primary" @click="openAll">openAll</van-button> <van-button type="primary" @click="openAll">Open All</van-button>
<van-button type="primary" @click="toggleAll">toggleAll</van-button> <van-button type="primary" @click="toggleAll">Toggle All</van-button>
``` ```
```js ```js
@ -148,6 +148,8 @@ export default {
}; };
``` ```
> Tips: The toggleAll method cannot be used in accordion mode.
## API ## API
### Collapse Props ### Collapse Props
@ -189,26 +191,29 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collap
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| toggleAll | Toggle expanded status of all collapses | _options?: boolean \| object_ | - | | toggleAll `v3.5.3` | Toggle the expanded status of all collapses | _options?: boolean \| object_ | - |
### toggleAll Usage ### toggleAll Usage
```js ```js
const { collapse } = this.$refs; import { ref } from 'vue';
import type { CollapseInstance } from 'vant';
const collapseRef = ref<CollapseInstance>();
// Toggle all // Toggle all
collapse.toggleAll(); collapseRef.value?.toggleAll();
// Expand all // Expand all
collapse.toggleAll(true); collapseRef.value?.toggleAll(true);
// UnExpand all // UnExpand all
collapse.toggleAll(false); collapseRef.value?.toggleAll(false);
// Toggle all, skip disabled // Toggle all, skip disabled
collapse.toggleAll({ collapseRef.value?.toggleAll({
skipDisabled: true, skipDisabled: true,
}); });
// Expand all, skip disabled // Expand all, skip disabled
collapse.toggleAll({ collapseRef.value?.toggleAll({
expanded: true, expanded: true,
skipDisabled: true, skipDisabled: true,
}); });

19
packages/vant/src/collapse/README.zh-CN.md
View File

@ -170,6 +170,8 @@ export default {
}; };
``` ```
> Tips: 手风琴模式下无法使用 toggleAll 方法。
## API ## API
### Collapse Props ### Collapse Props
@ -211,26 +213,29 @@ export default {
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| toggleAll | 切换所有面板展开状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _options?: boolean \| object_ | - | | toggleAll `v3.5.3` | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | - |
### toggleAll 方法示例 ### toggleAll 方法示例
```js ```js
const { collapse } = this.$refs; import { ref } from 'vue';
import type { CollapseInstance } from 'vant';
const collapseRef = ref<CollapseInstance>();
// 全部切换 // 全部切换
collapse.toggleAll(); collapseRef.value?.toggleAll();
// 全部展开 // 全部展开
collapse.toggleAll(true); collapseRef.value?.toggleAll(true);
// 全部收起 // 全部收起
collapse.toggleAll(false); collapseRef.value?.toggleAll(false);
// 全部全部切换，并跳过禁用的复选框 // 全部全部切换，并跳过禁用的复选框
collapse.toggleAll({ collapseRef.value?.toggleAll({
skipDisabled: true, skipDisabled: true,
}); });
// 全部选中，并跳过禁用的复选框 // 全部选中，并跳过禁用的复选框
collapse.toggleAll({ collapseRef.value?.toggleAll({
expanded: true, expanded: true,
skipDisabled: true, skipDisabled: true,
}); });

6
packages/vant/src/collapse/index.ts
View File

@ -3,7 +3,11 @@ import _Collapse from './Collapse';
export const Collapse = withInstall(_Collapse); export const Collapse = withInstall(_Collapse);
export default Collapse; export default Collapse;
export type { CollapseProps, CollapseToggleAllOptions } from './Collapse'; export type {
CollapseProps,
CollapseInstance,
CollapseToggleAllOptions,
} from './Collapse';
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {

74
packages/vant/src/collapse/test/__snapshots__/demo.spec.ts.snap
View File

@ -197,4 +197,78 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div>
<div class="van-collapse van-hairline--top-bottom">
<div class="van-collapse-item">
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded"
role="button"
tabindex="0"
aria-expanded="true"
>
<div class="van-cell__title">
<span>
Title1
</span>
</div>
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
</i>
</div>
<div class="van-collapse-item__wrapper">
<div class="van-collapse-item__content">
Content 1
</div>
</div>
</div>
<div class="van-collapse-item van-collapse-item--border">
<div class="van-cell van-cell--clickable van-collapse-item__title"
role="button"
tabindex="0"
aria-expanded="false"
>
<div class="van-cell__title">
<span>
Title2
</span>
</div>
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
</i>
</div>
</div>
<div class="van-collapse-item van-collapse-item--border">
<div class="van-cell van-cell--clickable van-collapse-item__title"
role="button"
tabindex="0"
aria-expanded="false"
>
<div class="van-cell__title">
<span>
Title3
</span>
</div>
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
</i>
</div>
</div>
</div>
<div class="demo-collapse-buttons">
<button type="button"
class="van-button van-button--primary van-button--normal"
>
<div class="van-button__content">
<span class="van-button__text">
Open All
</span>
</div>
</button>
<button type="button"
class="van-button van-button--primary van-button--normal"
>
<div class="van-button__content">
<span class="van-button__text">
Toggle All
</span>
</div>
</button>
</div>
</div>
`; `;

770
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff