mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +08:00
chore(Collapse): fix snapshot and update document (#10845)
This commit is contained in:
neverland
GitHub
parent
e45ac25ac0
commit
a1d4297c92
@ -301,21 +301,24 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
|
||||
### toggleAll Usage
|
||||
|
||||
```js
|
||||
const { checkboxGroup } = this.$refs;
|
||||
import { ref } from 'vue';
|
||||
import type { CheckboxGroupInstance } from 'vant';
|
||||
|
||||
const checkboxGroupRef = ref<CheckboxGroupInstance>();
|
||||
|
||||
// Toggle all
|
||||
checkboxGroup.toggleAll();
|
||||
checkboxGroup.value?.toggleAll();
|
||||
// Select all
|
||||
checkboxGroup.toggleAll(true);
|
||||
checkboxGroup.value?.toggleAll(true);
|
||||
// Unselect all
|
||||
checkboxGroup.toggleAll(false);
|
||||
checkboxGroup.value?.toggleAll(false);
|
||||
|
||||
// Toggle all, skip disabled
|
||||
checkboxGroup.toggleAll({
|
||||
checkboxGroup.value?.toggleAll({
|
||||
skipDisabled: true,
|
||||
});
|
||||
// Select all, skip disabled
|
||||
checkboxGroup.toggleAll({
|
||||
checkboxGroup.value?.toggleAll({
|
||||
checked: true,
|
||||
skipDisabled: true,
|
||||
});
|
||||
|
||||
@ -318,21 +318,24 @@ export default {
|
||||
### toggleAll 方法示例
|
||||
|
||||
```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,
|
||||
});
|
||||
// 全部选中，并跳过禁用的复选框
|
||||
checkboxGroup.toggleAll({
|
||||
checkboxGroupRef?.value.toggleAll({
|
||||
checked: true,
|
||||
skipDisabled: true,
|
||||
});
|
||||
|
||||
@ -96,9 +96,11 @@ export default defineComponent({
|
||||
if (props.accordion) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof options === 'boolean') {
|
||||
options = { expanded: options };
|
||||
}
|
||||
|
||||
const { expanded, skipDisabled } = options!;
|
||||
const expandedChildren = children.filter((item: any) => {
|
||||
if (item.disabled && skipDisabled) {
|
||||
@ -106,6 +108,7 @@ export default defineComponent({
|
||||
}
|
||||
return expanded ?? !item.expanded.value;
|
||||
});
|
||||
|
||||
const names = expandedChildren.map((item) => item.itemName.value);
|
||||
updateName(names);
|
||||
};
|
||||
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
### Toggle All
|
||||
|
||||
通过 `Collapse` 实例上的 `toggleAll` 方法可以实现全选与反选。
|
||||
Using `toggleAll` method to toggle all items.
|
||||
|
||||
```html
|
||||
<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>
|
||||
|
||||
<van-button type="primary" @click="openAll">openAll</van-button>
|
||||
<van-button type="primary" @click="toggleAll">toggleAll</van-button>
|
||||
<van-button type="primary" @click="openAll">Open All</van-button>
|
||||
<van-button type="primary" @click="toggleAll">Toggle All</van-button>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -148,6 +148,8 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: The toggleAll method cannot be used in accordion mode.
|
||||
|
||||
## API
|
||||
|
||||
### 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 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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
|
||||
|
||||
```js
|
||||
const { collapse } = this.$refs;
|
||||
import { ref } from 'vue';
|
||||
import type { CollapseInstance } from 'vant';
|
||||
|
||||
const collapseRef = ref<CollapseInstance>();
|
||||
|
||||
// Toggle all
|
||||
collapse.toggleAll();
|
||||
collapseRef.value?.toggleAll();
|
||||
// Expand all
|
||||
collapse.toggleAll(true);
|
||||
collapseRef.value?.toggleAll(true);
|
||||
// UnExpand all
|
||||
collapse.toggleAll(false);
|
||||
collapseRef.value?.toggleAll(false);
|
||||
|
||||
// Toggle all, skip disabled
|
||||
collapse.toggleAll({
|
||||
collapseRef.value?.toggleAll({
|
||||
skipDisabled: true,
|
||||
});
|
||||
// Expand all, skip disabled
|
||||
collapse.toggleAll({
|
||||
collapseRef.value?.toggleAll({
|
||||
expanded: true,
|
||||
skipDisabled: true,
|
||||
});
|
||||
|
||||
@ -170,6 +170,8 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: 手风琴模式下无法使用 toggleAll 方法。
|
||||
|
||||
## API
|
||||
|
||||
### Collapse Props
|
||||
@ -211,26 +213,29 @@ export default {
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| toggleAll | 切换所有面板展开状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _options?: boolean \| object_ | - |
|
||||
| toggleAll `v3.5.3` | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | - |
|
||||
|
||||
### toggleAll 方法示例
|
||||
|
||||
```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,
|
||||
});
|
||||
// 全部选中，并跳过禁用的复选框
|
||||
collapse.toggleAll({
|
||||
collapseRef.value?.toggleAll({
|
||||
expanded: true,
|
||||
skipDisabled: true,
|
||||
});
|
||||
|
||||
@ -3,7 +3,11 @@ import _Collapse from './Collapse';
|
||||
|
||||
export const Collapse = withInstall(_Collapse);
|
||||
export default Collapse;
|
||||
export type { CollapseProps, CollapseToggleAllOptions } from './Collapse';
|
||||
export type {
|
||||
CollapseProps,
|
||||
CollapseInstance,
|
||||
CollapseToggleAllOptions,
|
||||
} from './Collapse';
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
|
||||
@ -197,4 +197,78 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</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
770
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user