github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: ✨checkbox label slot support use option label (#6642) 

* docs: 📃change the default  setting of  "treeNodeFilterProp" from  "value" to "label"

* revert: ↩revert this config and create another pr to commit

* feat: ✨checkbox label slot support use option label

* test: 🧪update checkbox *.snap file

---------

Co-authored-by: tangjinzhou <415800467@qq.com>
pull/6658/head
专业逮虾户aa 2023-06-15 11:11:24 +08:00 committed by GitHub
parent 58f6d6ee28
commit afc1b84ed0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/checkbox/Group.tsx
View File

@ -108,7 +108,7 @@ export default defineComponent({
onChange={option.onChange} onChange={option.onChange}
class={`${groupPrefixCls.value}-item`} class={`${groupPrefixCls.value}-item`}
> >
{option.label === undefined ? slots.label?.(option) : option.label} {slots.label !== undefined ? slots.label?.(option) : option.label}
</Checkbox> </Checkbox>
)); ));
} }

2
components/checkbox/__tests__/__snapshots__/demo.test.js.snap
View File

@ -39,7 +39,7 @@ exports[`renders ./components/checkbox/demo/group.vue correctly 1`] = `
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
<br> <br>
<br> <br>
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Pear</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Orange</span></span></label></div>
`; `;
exports[`renders ./components/checkbox/demo/layout.vue correctly 1`] = ` exports[`renders ./components/checkbox/demo/layout.vue correctly 1`] = `

6
components/checkbox/demo/group.vue
View File

@ -27,8 +27,8 @@ Generate a group of checkboxes from an array
<br /> <br />
<br /> <br />
<a-checkbox-group v-model:value="state.value4" :options="optionsWithDisabled" disabled> <a-checkbox-group v-model:value="state.value4" :options="optionsWithDisabled" disabled>
<template #label="{ value }"> <template #label="{ label }">
<span style="color: red">{{ value }}</span> <span style="color: red">{{ label }}</span>
</template> </template>
</a-checkbox-group> </a-checkbox-group>
</template> </template>
@ -42,7 +42,7 @@ const options = [
{ label: 'Orange', value: 'Orange' }, { label: 'Orange', value: 'Orange' },
]; ];
const optionsWithDisabled = [ const optionsWithDisabled = [
{ value: 'Apple' }, { label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' }, { label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false }, { label: 'Orange', value: 'Orange', disabled: false },
]; ];