Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(checkbox): support custom node in checkbox group #2604

Merged
merged 3 commits into from
Jul 24, 2023
Merged

fix(checkbox): support custom node in checkbox group #2604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
944907c
fix(checkbox): support custom node in checkbox group
chaishi Jul 22, 2023
807d6a8
test(checkbox): update snapshots
chaishi Jul 23, 2023
9a0e8dd
fix(checkbox): update snapshots
chaishi Jul 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions src/checkbox/_example/group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@
</t-space>

<!-- key 是避免重复渲染的关键；Checkbox.key is the key point of list render -->
<!-- 数据量大的情况下，不建议使用这种方式：因父组件 CheckboxGroup 选中项变化，子组件 Checkbox 一定重新渲染。 -->
<!-- 数据量大的情况下，不建议使用这种方式：因 Vue2 框架中，父组件 CheckboxGroup 选中项变化，子组件 Checkbox 一定全量重新渲染。 -->
<t-space direction="vertical">
<div>方式二：组件内置全选功能，使用插槽定义选项。选中值: {{ value2.join(', ') }}</div>
<div>
方式二：组件内置全选功能，使用插槽定义选项。⚠️注意：数据量大时，不建议使用这种方式。选中值:
{{ value2.join(', ') }}。
</div>
<t-checkbox-group v-model="value2" @change="onChange2">
<t-checkbox key="1" :checkAll="true" label="全选" />
<t-checkbox key="2" value="选项一">选项一</t-checkbox>
Expand All @@ -22,13 +25,18 @@

<!-- 数据量大的情况下，建议使用这种方式，可以避免选中项重复渲染 -->
<t-space direction="vertical">
<div>方式三：组件内置全选功能，使用 `options` 定义选项。选中值: {{ value3.join(', ') }}</div>
<div>
方式三：组件内置全选功能，使用 `options` 定义选项。数据量大时，可以避免所有元素重新渲染。选中值:
{{ value3.join(', ') }}
</div>
<t-checkbox-group v-model="value3" :options="options2" @change="onChange3" />
</t-space>

<!-- 数据量大的情况下，建议使用这种方式，可以避免选中项重复渲染 -->
<t-space direction="vertical">
<div>方式四：组件内置全选功能，`options` 定义选项列表，插槽定义选项内容</div>
<div>
方式四：组件内置全选功能，`options` 定义选项列表，插槽定义选项内容。数据量大时，可以避免所有元素重新渲染。
</div>
<t-checkbox-group :defaultValue="['选项一']" :options="options3">
<template #label="{ data: { label, value, checkAll }, index }">
<span v-if="checkAll">{{ label }}</span>
Expand Down
18 changes: 14 additions & 4 deletions src/checkbox/group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,12 +177,25 @@ export default defineComponent({
{ immediate: true },
);

const addStoreKeyToCheckbox = (nodes: VNode[]) => {
for (let i = 0, len = nodes.length; i < len; i++) {
const vNode = nodes[i];
if (vNode.componentOptions && /TCheckbox/.test(vNode.tag)) {
(vNode.componentOptions.propsData as any).storeKey = storeKey;
}
if (vNode.children?.length) {
addStoreKeyToCheckbox(vNode.children);
}
}
};

return {
storeKey,
optionList,
innerValue,
COMPONENT_NAME,
getOptionListBySlots,
addStoreKeyToCheckbox,
};
},

Expand All @@ -204,10 +217,7 @@ export default defineComponent({
} else {
const nodes = this.$scopedSlots.default?.(null);
this.optionList = this.getOptionListBySlots();
nodes.forEach((vNode: VNode) => {
// eslint-disable-next-line
(vNode.componentOptions.propsData as any).storeKey = this.storeKey;
});
this.addStoreKeyToCheckbox(nodes);
children = nodes;
}
return (
Expand Down
6 changes: 3 additions & 3 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24660,7 +24660,7 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
class="t-space-item"
>
<div>
方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一
方式二：组件内置全选功能，使用插槽定义选项。⚠️注意：数据量大时，不建议使用这种方式。选中值: 选项一。
</div>
</div>
<div
Expand Down Expand Up @@ -24762,7 +24762,7 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
class="t-space-item"
>
<div>
方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三
方式三：组件内置全选功能，使用 \`options\` 定义选项。数据量大时，可以避免所有元素重新渲染。选中值: 选项一, 选项二, 选项三
</div>
</div>
<div
Expand Down Expand Up @@ -24866,7 +24866,7 @@ exports[`csr snapshot test > csr test ./src/checkbox/_example/group.vue 1`] = `
class="t-space-item"
>
<div>
方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容
方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容。数据量大时，可以避免所有元素重新渲染。
</div>
</div>
<div
Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ exports[`ssr snapshot test > renders ./src/checkbox/_example/base.vue correctly

exports[`ssr snapshot test > renders ./src/checkbox/_example/controlled.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:36px;\\" data-v-032bf202><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\" data-v-032bf202><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" tabindex=\\"-1\\" checked=\\"checked\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">语法糖（v-model）</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" data-v-032bf202><input type=\\"checkbox\\" tabindex=\\"-1\\" checked=\\"checked\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控属性</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\" data-v-032bf202><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">非受控属性</span></label></div></div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\" data-v-032bf202><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控模式选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"2\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控模式选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"3\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">受控模式选项三</span></label></div></div></div>"`;

exports[`ssr snapshot test > renders ./src/checkbox/_example/group.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:48px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" indeterminate=\\"indeterminate\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label></div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项一</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式二：组件内置全选功能，使用插槽定义选项。选中值: 选项一</div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式三：组件内置全选功能，使用 \`options\` 定义选项。选中值: 选项一, 选项二, 选项三</div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项二</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容</div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span>全选</span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionA\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项一（optionA/1） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionB\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项二（optionB/2） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionC\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项三（optionC/3） </span></span></label></div></div></div></div></div>"`;
exports[`ssr snapshot test > renders ./src/checkbox/_example/group.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:48px;\\"><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div>方式一：业务侧自定义全选功能。选中值: 选项一</div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-indeterminate\\"><input type=\\"checkbox\\" indeterminate=\\"indeterminate\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label></div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项一</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div> 方式二：组件内置全选功能，使用插槽定义选项。⚠️注意：数据量大时，不建议使用这种方式。选中值: 选项一。 </div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项二</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div> 方式三：组件内置全选功能，使用 \`options\` 定义选项。数据量大时，可以避免所有元素重新渲染。选中值: 选项一, 选项二, 选项三 </div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">全选</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项一\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项一</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项二\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><div>选项二</div></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"选项三\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">选项三</span></label></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div> 方式四：组件内置全选功能，\`options\` 定义选项列表，插槽定义选项内容。数据量大时，可以避免所有元素重新渲染。 </div></div><div class=\\"t-space-item\\"><div role=\\"group\\" aria-label=\\"checkbox-group\\" class=\\"t-checkbox-group\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span>全选</span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionA\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项一（optionA/1） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionB\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项二（optionB/2） </span></span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" tabindex=\\"-1\\" value=\\"optionC\\" class=\\"t-checkbox__former\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><span> 选项三（optionC/3） </span></span></label></div></div></div></div></div>"`;

exports[`ssr snapshot test > renders ./src/checkbox/_example/link.vue correctly 1`] = `
"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:24px;\\"><div class=\\"t-space-item\\"><div>选中值: [
Expand Down
Loading