feat: update checkbox divider dropdown
parent
6b5c0a404b
commit
380331df80
|
@ -55,7 +55,10 @@ export default {
|
||||||
} = props
|
} = props
|
||||||
const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, attrs: getAttrs(this) }
|
const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, attrs: getAttrs(this) }
|
||||||
if (checkboxGroup) {
|
if (checkboxGroup) {
|
||||||
checkboxProps.on.change = () => checkboxGroup.toggleOption({ label: children, value: props.value })
|
checkboxProps.on.change = (...args) => {
|
||||||
|
this.$emit('change', ...args)
|
||||||
|
checkboxGroup.toggleOption({ label: children, value: props.value })
|
||||||
|
}
|
||||||
checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1
|
checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1
|
||||||
checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled
|
checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
|
|
||||||
import Checkbox from './Checkbox'
|
import Checkbox from './Checkbox'
|
||||||
import hasProp from '../_util/props-util'
|
import hasProp from '../_util/props-util'
|
||||||
|
function noop () {}
|
||||||
export default {
|
export default {
|
||||||
name: 'ACheckboxGroup',
|
name: 'ACheckboxGroup',
|
||||||
props: {
|
props: {
|
||||||
|
@ -82,7 +83,7 @@ export default {
|
||||||
disabled={'disabled' in option ? option.disabled : props.disabled}
|
disabled={'disabled' in option ? option.disabled : props.disabled}
|
||||||
value={option.value}
|
value={option.value}
|
||||||
checked={state.sValue.indexOf(option.value) !== -1}
|
checked={state.sValue.indexOf(option.value) !== -1}
|
||||||
onChange={() => this.toggleOption(option)}
|
onChange={option.onChange || noop}
|
||||||
class={`${groupPrefixCls}-item`}
|
class={`${groupPrefixCls}-item`}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
|
|
|
@ -103,4 +103,21 @@ describe('CheckboxGroup', () => {
|
||||||
expect(wrapper.vm.sValue).toEqual(['Apple'])
|
expect(wrapper.vm.sValue).toEqual(['Apple'])
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/12642
|
||||||
|
it('should trigger onChange in sub Checkbox', () => {
|
||||||
|
const onChange = jest.fn()
|
||||||
|
const wrapper = mount({
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<Checkbox.Group>
|
||||||
|
<Checkbox value='my' onChange={onChange} />
|
||||||
|
</Checkbox.Group>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
wrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
|
||||||
|
expect(onChange).toBeCalled()
|
||||||
|
expect(onChange.mock.calls[0][0].target.value).toEqual('my')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
category: 'Components',
|
category: 'Components',
|
||||||
subtitle: '多选框',
|
subtitle: '多选框',
|
||||||
type: 'Data Entry',
|
type: 'Data Entry',
|
||||||
|
zhType: '数据录入',
|
||||||
title: 'Checkbox',
|
title: 'Checkbox',
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
| -------- | ----------- | ---- | ------- |
|
| -------- | ----------- | ---- | ------- |
|
||||||
| defaultValue | Default selected value | string\[] | \[] |
|
| defaultValue | Default selected value | string\[] | \[] |
|
||||||
| disabled | Disable all checkboxes | boolean | false |
|
| disabled | Disable all checkboxes | boolean | false |
|
||||||
| options | Specifies options | string\[] \| Array<{ label: string value: string disabled?: boolean }> | \[] |
|
| options | Specifies options | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
|
||||||
| value | Used for setting the currently selected value. | string\[] | \[] |
|
| value | Used for setting the currently selected value. | string\[] | \[] |
|
||||||
|
|
||||||
#### events
|
#### events
|
||||||
|
|
|
@ -25,9 +25,8 @@
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| defaultValue | 默认选中的选项 | string\[] | \[] |
|
| defaultValue | 默认选中的选项 | string\[] | \[] |
|
||||||
| disabled | 整组失效 | boolean | false |
|
| disabled | 整组失效 | boolean | false |
|
||||||
| options | 指定可选项 | string\[] \| Array<{ label: string value: string disabled?: boolean }> | \[] |
|
| options | 指定可选项 | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
|
||||||
| value | 指定选中的选项 | string\[] | \[] |
|
| value | 指定选中的选项 | string\[] | \[] |
|
||||||
| onChange | 变化时回调函数 | Function(checkedValue) | - |
|
|
||||||
|
|
||||||
#### 事件
|
#### 事件
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
|
|
@ -23,6 +23,7 @@ const md = {
|
||||||
export default {
|
export default {
|
||||||
category: 'Components',
|
category: 'Components',
|
||||||
type: 'Other',
|
type: 'Other',
|
||||||
|
zhType: '其他',
|
||||||
title: 'Divider',
|
title: 'Divider',
|
||||||
subtitle: '分割线',
|
subtitle: '分割线',
|
||||||
render () {
|
render () {
|
||||||
|
|
|
@ -27,6 +27,7 @@ export default {
|
||||||
category: 'Components',
|
category: 'Components',
|
||||||
subtitle: '下拉菜单',
|
subtitle: '下拉菜单',
|
||||||
type: 'Navigation',
|
type: 'Navigation',
|
||||||
|
zhType: '导航',
|
||||||
title: 'Dropdown',
|
title: 'Dropdown',
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
|
|
Loading…
Reference in New Issue